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

Question

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

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

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

Answer 1

您可以通过嵌套滚动视图[=]实现多行水平红蓝框（保持水平滚动），其中行可以垂直滚动 21=]

您可以通过使用 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>

如果回答让您满意，请点赞:-)