如何在本机反应中使用按钮滚动页面？

问题描述

有两个按钮和两个屏幕。屏幕位于 ScrollView 内。我试图transform，但每次View被转换而不是ScrollView，我还没有找到如何使用scrollTo方法来做到这一点。任何帮助表示赞赏。

还有其他方法吗？

const width = Dimensions.get("window").width    
const TopBarStyle = () => {    
  const [xCoordinateTabOne,setxCoordinateTabOne] = useState(0)
  const [xCoordinateTabTwo,setxCoordinateTabTwo] = useState(0)
  const [active,setactive] = useState(1)
  const [xCoordinatePath,setxCoordinatePath] = useState(useRef(new Animated.Value(0)).current)
  const [xCoordinateFirstScreen,setxCoordinateFirstScreen] = useState(useRef(new Animated.Value(0)).current)
  const [xCoordinateSecondScreen,setxCoordinateSecondScreen] = useState(useRef(new Animated.Value(0)).current)
  
  const handleslide = (type) => {
    Animated.spring(xCoordinatePath,{toValue: type}).start()
    if ( active === 0 ) {
      Animated.parallel([
        Animated.spring(xCoordinateFirstScreen,{toValue:0}).start(),Animated.spring(xCoordinateSecondScreen,{toValue:0}).start()
      ])} else {
        Animated.parallel([
          Animated.spring(xCoordinateFirstScreen,{toValue: -width}).start(),{toValue: -width}).start()
        ])}
  }    
  const onPressTabOne = () => {setactive(0),handleslide(xCoordinateTabOne) }
  const onPressTabTwo = () => {setactive(1),handleslide(xCoordinateTabTwo) }    
  return (
    <View style = {{flex: 1}} >
      <View style = {styles.window1}>
        <View style = {styles.window2}  > 
        <Animated.View style = {[styles.animatedView,{transform: [{translateX: xCoordinatePath}]}]}/>
          <TouchableOpacity style = {styles.tabOne}
            onLayout = {event => setxCoordinateTabOne(event.nativeEvent.layout.x)}
            onPress = {() =>onPressTabOne()}              > 
          </TouchableOpacity>
          <TouchableOpacity style = {styles.tabtwo} 
            onLayout = {event => setxCoordinateTabTwo(event.nativeEvent.layout.x)}
            onPress = {() =>onPressTabTwo()}              >
          </TouchableOpacity>              
        </View>
      </View  >
      <Animated.ScrollView horizontal = {true} pagingEnabled = {true} >            
        <Animated.View style = {[styles.animatedViewScreenOne,{transform: [{translateX: xCoordinateFirstScreen}]}]} >          
          <ScreenOne />
        </Animated.View>
        <Animated.View style= {[styles.animatedViewScreenTwo,{transform: [{translateX: xCoordinateSecondScreen}]}]} >                    
          <ScreenTwo />                  
        </Animated.View>        
      </Animated.ScrollView>
    </View>
  )
}

解决方法

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

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

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