在本机反应中一次水平滚动两行

Question

我有一个水平滚动视图，其中有 2 行作为一个单元水平滑动。以下是测试代码，它可以工作，但相同的数据被渲染两次。IE。“在第一列的两行中发布 1”，“在第二列的两行中发布 2”。我需要的是第一列中的“post 1”和“post 2”，第二列中的“post 3”和“post 4”等等。它就像在水平滚动视图中具有 2 行和几列的表格布局。

https://snack.expo.io/@codebyte99/multipleloop

renderRow(item) {
    return (
      <View style={{ margin: 5 }}>   
        <View style={{
            backgroundColor: 'red',
            width: 200,
            height: 100,
            marginBottom: 1,
          }}>
          <Text>{item.title}</Text>
        </View> 

        <View
          style={{
            backgroundColor: 'green',
            width: 200,
            height: 100,
            marginBottom: 1,
          }}>
          <Text>{item.title}</Text>
        </View>
      </View>
    );
}

render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          {this.state.data.map(item => this.renderRow(item))}
        </ScrollView>
      </View>
    );
}

Answer 1

将数组拆分为多个大小为 2 的数组，如下所示

var arrays = [], size = 2;
while (this.state.data.length > 0)
    arrays.push(this.state.data.splice(0, size));

FlatList与horizontal={true}财产一起使用

<FlatList data={arrays}
          horizontal={true}
          renderItem={({ item, index }) => this.renderRow(item)} />

你的renderRow意志看起来像这样

renderRow(item) {
    return (
        <View style={{ margin: 5 }}>
            <View style={{
                backgroundColor: 'red',
                width: 200,
                height: 100,
                marginBottom: 1,
            }}>
                <Text>{item[0].title}</Text>
            </View>
            {item.length > 1 ?
                <View
                    style={{
                        backgroundColor: 'green',
                        width: 200,
                        height: 100,
                        marginBottom: 1,
                    }}>
                    <Text>{item[1].title}</Text>
                </View> : null}
        </View>
    );
}