1

我正在尝试制作一个原生反应屏幕，其中上视图的高度可以通过从底部拖动来调整大小。在此处输入图像描述

(1) 的大小在拖动时增加 (2)

到目前为止，我尝试了两种方法 1. PanResponder

const Chat = (props) => {
  const orders = [
    //Some Array
  ]
  const Height = Dimensions.get('window').height

 const boxHeight = useRef(new Animated.Value(Height / 3)).current
  const panResponder = useRef(PanResponder.create({

    onMoveShouldSetPanResponder: (evt, gestureState) => true,

    onPanResponderMove: (evt, gestureState) => {

      const nextValue = boxHeight+gestureState.dy
      let newVal = nextValue >= maxHeight?maxHeight:nextValue
      newVal = newVal <= minHeight?minHeight:newVal
      boxHeight.setValue(newVal)
    },
  }
)).current;
return (
    <Container>
      <Animated.View style={[{ borderBottomColor: '#ccc', borderBottomWidth: 3 }, { height:boxHeight }]}>
         <FlatList
          data={orders}
          renderItem={({ item, index }) => <List item={item} index={index} />}
        />
        <View {...panResponder.panHandlers} style={{backgroundColor:'#000',height:20}}></View >
      </Animated.View>
      <ChatScreen />
    </Container>
  )
}
  1. 泛手势处理程序
const Chat = (props) => {
  const orders = [
    //some array
  ]
  const Height = Dimensions.get('window').height
  const boxHeight = useRef(new Animated.Value(Height / 3)).current
  const minHeight = 10
  const maxHeight = Height - 100

  const onPanGestureEvent = (event) => {
    boxHeight.setValue(
      Animated.diffClamp(
        Animated.add(
          orderBoxHeight, Animated.multiply(
            event.nativeEvent.translationY, Animated.diffClamp(
              event.nativeEvent.velocityY, 0, 1
            )
          )
        )
      ), minHeight, maxHeight
    )
  }
  return (
    <Container>
      <Animated.View style={[{ borderBottomColor: '#ccc', borderBottomWidth: 3 }, { height: boxHeight }]}>
        <FlatList
          data={orders}
          renderItem={({ item, index }) => <OrderList item={item} index={index} />}
        />
        <PanGestureHandler
          onGestureEvent={(event) => onPanGestureEvent(event)}
        >
          <Animated.View style={{ backgroundColor: '#000', height: 20 }}></Animated.View >
        </PanGestureHandler>
      </Animated.View>
      <ChatScreen />
    </Container>
  )
}

但是没有一个有效...我也尝试了两者的其他几种变体，但是它们都没有按预期工作，要么滑动太快，要么根本不动

4

0 回答 0