Question

我已经使用以下代码实现了水平滚动：https://snack.expo.io/H1CnjIeDb

如何实现多行水平的红蓝色框（保持水平滚动），以及可以垂直滚动的行。

此外，如何在滚动视图内以编程方式在水平和垂直滚动中添加<View style={styles.view} />？

Answer 1

您可以实现多行水平的红蓝色框（保持水平滚动），并且可以通过嵌套滚动视图

进行垂直滚动

通过使用Map功能，您可以实现以编程方式在内部滚动视图中进行水平和垂直滚动添加。选中Expo snack。我已经实现了您所需要的。

 <ScrollView
        ref={scrollView => {
          this.scrollView = scrollView;
        }}
        style={styles.container}
        //pagingEnabled={true}
        horizontal={false}
        decelerationRate={0}
        snapToInterval={width - 60}
        snapToAlignment={'center'}
        contentInset={{
          top: 0,
          left: 30,
          bottom: 0,
          right: 30,
        }}>
        {array.map(item => {
          return (
            <ScrollView horizontal={true}>
              {array.map(item => {
                return (
                  <View style={item % 2 === 0 ? styles.view : styles.view2} />
                );
              })}
            </ScrollView>
          );
        })}
      </ScrollView>

如果答案让您满意，请投票：-）

React Native Expo水平和垂直滚动-Android和iOS

1 个答案: