Animated.ScrollView React Native 的问题

问题描述

我正在尝试构建一个相当简单的应用程序，而且我是动画新手。我正在创建一个 panResponder 并将其分配给容器 <Animated.ScrollView {...panResponder.panHandlers} />，这样每当用户向左或向右滑动时，状态就会改变，并且不同的文本将显示为滑动动画。然而，有些文本太长，我希望屏幕可以滚动，但它似乎不起作用。代码如下：

  const [screen,setScreen] = useState(0);
  const [isLoading,setIsLoading] = useState(false);
  const pan = useRef(new Animated.ValueXY()).current;
  const [textAnim,setTextAnim] = useState(new Animated.Value(300));

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => {
      console.log(pan.x._value);
      if(pan.x._value < -40 || pan.x._value > 40){
        console.log('started')
      }
      
      return true
    },onMoveShouldSetPanResponder: () => true,onPanResponderMove: Animated.event(
      [
        null,{
          dx: pan.x,dy: pan.y,},],{ useNativeDriver: false }
    ),onPanResponderRelease: (e) => {
      if (pan.x._value < -40) {
        setScreen((s) => s + 1);
        Animated.timing(textAnim,{
          tovalue:450,duration:0,useNativeDriver:true
        }).start(() => {
          Animated.timing(textAnim,{
            tovalue:0,duration:500,useNativeDriver:true
          }).start()
        })
        
      }
      if (pan.x._value > 40) {
        setScreen((s) => s - 1);
        Animated.timing(textAnim,{
          tovalue:-450,useNativeDriver:true
          }).start()
        })
      }

     
    },});

return (
    <Animated.ScrollView  contentContainerStyle={styles.container} {...panResponder.panHandlers}>
          <View style={{alignItems:'center'}} >
            <MaterialCommunityIcons
              name='gesture-swipe'
              size={32}
              color='white'
            />
          </View>
      <Video
        source={VV[screen]}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode='contain'
        shouldplay
        isBuffering={true}
        isLooping
        style={{ width: "100%",height:300,position:'relative',}}
      />
    <ScrollView >
      <Animated.Text style={[{color:'white',fontSize:18,textAlign:'justify'},{
        transform:[{
          translateX:textAnim
        }]
      }]}>
        {TT[screen]}
      </Animated.Text>
      </ScrollView>
      <StatusBar color='black' />
    </Animated.ScrollView>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）