如何通过按钮单击水平滚动，例如下一个和上一个。在本机反应答案

【问题标题】：how to scroll horizontal by button click like next and previous. in react native如何通过按钮单击水平滚动，例如下一个和上一个。在本机反应
【发布时间】：2021-05-28 09:26:19
【问题描述】：

我正在尝试逐屏滚动，例如屏幕 1，然后是屏幕 2，然后是屏幕 3，然后是屏幕 4，依此类推，还可以滚动到上一个屏幕，例如从屏幕 4 到屏幕 3。但是在下面的代码中，我能够仅在两个屏幕之间滚动。屏幕 1 和屏幕 2。我想滚动更多屏幕，如屏幕 3、4、5、6、7、8。请帮忙。

   <View style={styles.MainContainer}>
        <View style={styles.ButtonViewContainer}>
          <View style={styles.ButtonContainer}>
            <Button
              title="Previous Screen"
              onPress={() => {
                this.scroll.scrollTo({ x: 1 });
              }}
            />
          </View>
          <View style={styles.ButtonContainer}>
            <Button
              title="Next Screen"
              onPress={() => {
                this.scroll.scrollTo({ x: screenWidth });
              }}
            />
          </View>
        </View>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          ref={(node) => (this.scroll = node)}
        >
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 1</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 2</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 3</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 4</Text>
          </View>
        </ScrollView>
      </View>

【问题讨论】：

请查看stackoverflow.com/questions/51629192/…
是的，我从那里复制了这段代码，但在那里他们也没有告诉你滚动超过 2 个屏幕

标签： javascript react-native scroll horizontal-scrolling

【解决方案1】：

尝试使用 npm 包

https://www.npmjs.com/package/react-native-app-intro-slider

这让您可以更好地控制多个屏幕的下一个和上一个

或者如果你想继续你现有的滚动视图管理，那么你必须管理滚动位置的当前索引，然后你可以用它管理下一个和上一个。

例如：

const App = () => {

    const currIndex = useRef(0)

    return (
        <View style={styles.MainContainer}>
            <View style={styles.ButtonViewContainer}>
                <View style={styles.ButtonContainer}>
                    <Button
                    title="Previous Screen"
                    onPress={() => {
                        currIndex.current -= 1
                        this.scroll.scrollTo({ x: screenWidth * currIndex.current });
                    }}
                    />
                </View>
                <View style={styles.ButtonContainer}>
                    <Button
                    title="Next Screen"
                    onPress={() => {
                        currIndex.current += 1
                        this.scroll.scrollTo({ x: screenWidth * currIndex.current });
                    }}
                    />
                </View>
            </View>
            <ScrollView
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                ref={(node) => (this.scroll = node)}>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 1</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 2</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 3</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 4</Text>
                </View>
            </ScrollView>
        </View>
    )
}

【讨论】：