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 
    } 

    }); 

로 목록보기에서 데이터를 표시 할 수 있어요. 또한 행 당 최대 항목을 2로 설정합니다. 최종 결과는이 표와 유사해야합니다 (경계선이 분명하지 않음)

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

달성 방법에 대한 아이디어가 있습니까?

Answer 1

FlatList를 사용하여 numColumns={2} 보조 및 style={{ flexDirection: 'column' }}으로 설정할 수 있습니다. 내 경우에는 내가 3 COLS 함께 일하고 있어요 : FlatList을 numColumns={3}로 :

<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}