ListViewでテーブルを作成する

Question

ListViewコンポーネントでテーブルの種類を作成しようとしています。私はそのセルの左側に各項目を配置する解決策を見つけていなかったが、このコード

constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
    dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
     }; 
    } 

    render() { 
    const appData = this.props.appData; 
    return (
     <View> 
     <View style={styles.container}> 
     <Text style={styles.title}> {I18n.t('appDetail.moreInformations')} </Text> 
     </View> 
     <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> 
     </View> 
    ) 
    } 
    } 


    const styles = StyleSheet.create({ 
    container: { 
     marginTop: 10, 
    }, 
    title:{ 
    fontSize: 20, 
    fontWeight: 'bold' 
    }, 
    list:{ 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     alignItems: 'center', 
     justifyContent:'space-around', 
     paddingTop: 10 
    } 

    }); 

とリストビュー内のデータを表示することができています。また、1行あたりの最大アイテム数を2に設定することもできます。私の最終的な結果は、この表のように見えるはずです（境界が明白でない）

+------------------------------+-----------------------------+ 
| item 1.      | item 2.      | 
+------------------------------+-----------------------------+ 
| item 3.      | item 4      | 
+------------------------------+-----------------------------+ 
| item5      | item 6      | 
+------------------------------+-----------------------------+ 

これを達成する方法はありますか？

Answer 1

フラットリストを使用して、numColumns={2}小物とstyle={{ flexDirection: 'column' }}と設定できます。 numColumns={3}でFlatList：私の場合は3つのcolsので働いている

<FlatList 
    style={{ flexDirection: 'column' }}    //<-- This Line 
    numColumns={3}         //<-- And this one 
    data={this.props.myList} 
    keyExtractor={(item, index) => item.Id} 
    renderItem={this.renderItem.bind(this)} 
/> 

Image: FlatList whit numColumns={3}