在React Native中，如何在按钮按下时编程滚动ScrollView？

Question

在React Native中，如何在按钮按下时编程滚动ScrollView？

11

因此，我使用ScrollView手动创建了一个React Native的引导屏幕，并添加了一个标有“下一步”按钮，以启用隐藏屏幕在屏幕上移动。现在我的挑战是，当按下按钮时，如何以编程方式使我的ScrollView滚动。以下是我尝试过的样例功能组件，但我不知道如何实现按钮按下滚动

export default function Onbaording({ navigation }) {
  const [sliderState, setSliderState] = React.useState({ currentPage: 0 });
  const { width, height } = Dimensions.get("window");

  const setSliderPage = (event) => {
    const { currentPage } = sliderState;
    const { x } = event.nativeEvent.contentOffset;
    const indexOfNextScreen = Math.floor(x / width);
    if (indexOfNextScreen !== currentPage) {
      setSliderState({
        ...sliderState,
        currentPage: indexOfNextScreen,
      });
    }
  };

  const { currentPage: pageIndex } = sliderState;

  return (
    <View style={Styles.container}>
      <SafeAreaView style={{ flex: 4 }}>
        <ScrollView
          horizontal={true}
          scrollEventThrottle={16}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          snapToStart={true}
          onScroll={(event: any) => {
            setSliderPage(event);
          }}
        >
          <View style={{ width, height, paddingHorizontal: 16 }}>
            <View style={Styles.Svg}>
              <WelcomeSvg1 />
            </View>

            <Text style={Styles.text}>Onboarding</Text>
            <Text>
              Done with React Native.
            </Text>
          </View>

          <View style={{ width, paddingHorizontal: 16 }}>
            <View style={Styles.Svg}>
              <WelcomeSvg2 />
            </View>

            <Text style={Styles.text}>Onboarding</Text>
            <Text>
              Done with React Native.
            </Text>
          </View>
        </ScrollView>


          <View style={Styles.paginationWrapper}>
            {Array.from(Array(2).keys()).map((key, index) => (
              <View
                style={[
                  Styles.paginationDots,
                  {
                    backgroundColor:
                      pageIndex === index ? "#51668F" : "#EAEAEA",
                  },
                ]}
                key={index}
              />
            ))}
          </View>
      </SafeAreaView>

      <View>
          <View
            style={{ flexDirection: "row", justifyContent: "space-between" }}
          >
            <TouchableOpacity
              onPress={() => {
                navigation.navigate("Signin");
              }}
            >
              <Text>Skip</Text>
            </TouchableOpacity>

            <TouchableOpacity>
              <Text>Next</Text>
            </TouchableOpacity>
          </View>
      </View>
    </View>
  );
}

- Ojay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kipnoedels · Accepted Answer

您可以将ref分配给您的ScrollView。该ref包含一个名为scrollTo()的函数。

首先定义ref：const scrollViewRef = useRef(null); (https://react.dev/reference/react/useRef#useref)

接下来将ref添加到您的ScrollView：

<ScrollView
   ref={scrollViewRef}
>
</ScrollView>

现在我们需要做的就是将ScrollView滚动到所需的位置。有多种方法可以实现这一点。我喜欢跟踪页面索引/编号来计算下一个滚动位置。您也可以使用FlatList。

因此，您可以在TouchableOpacity周围的Next上执行类似以下操作：

const toNextPage = () => {
   screenIndex += 1;
   scrollViewRef.current?.scrollTo({x: window.width * screenIndex, animated: true});
};

onPress={toNextPage}

请参阅https://reactnative.dev/docs/scrollview#scrollto以获取有关scrollTo()的更多信息。