Блог

Главная - Вопросы по программированию - Как увеличить высоту просмотра с помощью panresponder в react native?

Как увеличить высоту просмотра с помощью panresponder в react native?

#react-native #animation

#react-native #Анимация

Вопрос:

Я пытаюсь создать два родственных вида, меняющих там высоту. Когда мы перетаскиваем представление, его высота должна увеличиваться, а другая высота должна уменьшаться и наоборот. Для этого я использую pan responder, но любой другой подход также будет отличным. Проблема в том, что когда я перетаскиваю, а затем обрабатываю, представление перемещается вверх или вниз, но его высота не меняется. Аналогично, другой вид также не меняет свою высоту.

 const pan = useRef(new Animated.ValueXY()).current;

const panResponder = useRef(
  PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      pan.setOffset({
        x: pan.x._value,
        y: pan.y._value
      });
    },
    onPanResponderMove: Animated.event(
      [
        null,
        { dx: pan.x, dy: pan.y }
      ], { useNativeDriver: false }
    ),
    onPanResponderRelease: () => {
      pan.flattenOffset();
    }
  })
).current;

return <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'never', bottom: 'never' }}>
<Animated.View style={[{ backgroundColor: 'yellow', flex: 1 }]}>

</Animated.View>
    <Animated.View style={[{
      height: 100,
      backgroundColor: 'skyblue'
    }, {
      transform: [{ translateY: pan.y }]
    }]}>
      <Animated.View style={[{ justifyContent: 'center', alignItems: 'center', paddingVertical: 5, backgroundColor: '#f0f3f7' }]}
        {...panResponder.panHandlers}
      >
        <Block flex={false} color='#ccc' radius={10} style={{ height: 5, width: 35 }} />
      </Animated.View>
    </Animated.View>
    </SafeAreaView>