Question

我正在尝试按屏幕滚动屏幕，例如屏幕 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>

Answer 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>
    )
}

如何通过按钮单击水平滚动，如下一个和上一个。在反应原生

1 个答案: