reagieren-native Listview-Linie

Question

Listenansicht Zeilenvorschub zur nächsten Zeile füttern, jede Zeile mit zwei Elementen ist hier die Datenquelle:

var data=[ 
     { 
      "name": "test name0", 
      "url": "http://someurl.com" 
     }, 
     { 
      "name": "test name1", 
      "url": "http://someurl.com" 
     }, 
     { 
      "name": "test name2", 
      "url": "http://someurl.com" 
     }, 
     { 
      "name": "test name3", 
      "url": "http://someurl.com" 
     }, 
     { 
      "name": "test name4", 
      "url": "http://someurl.com" 
     } 
    ] 

Ich möchte um es anzuzeigen wie das, was die roten Wörter zeigt: Test name0, Test name1 (dann werden Zeilenvorschub und Daten in der nächsten Zeile angezeigt). Testname 2, Testname3 ...

Ich denke, dass es kein schwieriges Problem sein könnte. Aber ich weiß einfach nicht, wie ich es machen soll. Hier ist der Code:

_renderRow(rowData) { 
     return (
      <View style = {{flexDirection: 'row'}}> 
      <TouchableOpacity onPress = {() =>this._pressRow(rowData.url)} underlayColor = "transparent" > 
      <View> 
      <View style={styles.row}> 
      <Text style={styles.text}> {rowData.name} </Text> 
      </View> 
      </View> 
      </TouchableOpacity> 
      <TouchableOpacity onPress = {() =>this._pressRow(rowData.url)} underlayColor = "transparent" > 
      <View> 
      <View style={styles.row}> 
      <Text style={styles.text}> {rowData.name} </Text> 
      </View> 
      </View> 
      </TouchableOpacity> 
      </View> 
     ) 
    } 
    render() { 
     return (
      <View style = {styles.content}> 
       <ListView 
        contentContainerStyle = {styles.list} 
        pageSize={2} 
        dataSource = {this.state.dataSource} 
        renderRow={this._renderRow.bind(this)} 
       /> 
      </View> 
     ); 
    } 
var style = StyleSheet.create({ 
list: { 
     justifyContent: 'space-around', 
     flexDirection: 'row', 
     flexWrap: 'wrap' 
    }, 
    row: { 
     justifyContent: 'center', 
     paddingLeft: 20, 
     paddingRight: 20, 
     paddingTop: 50, 
     paddingBottom: 50, 
     margin: 10, 
     width: 150, 
     height: 150, 
     backgroundColor: '#F6F6F6', 
     alignItems: 'center', 
     borderWidth: 1, 
     borderRadius: 5, 
     borderColor: '#CCC' 
    }, 
)} ; 

Answer 1

ok, ich habe es gelöst.

list: { 
     justifyContent: 'space-around', 
     flexDirection: 'row', 
     flexWrap: 'wrap' , 
     width: Dimensions.get('window').width , 
    }, 

add width Attribut list. dann zeigt es, was ich will.