在本機中一次水平滾動兩行

Question

我有一個水平scrollView，其中有2行作為單位水平滑動。 以下是工作的測試代碼，但是相同的數據被渲染兩次。 即。 第一列的兩行中的“ post 1”和第二列的兩行中的“ post 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>
    );
}