反應母語的ListView換行

Question

列表視圖換行到下一行，兩個項目的每一行，這裏是數據源：

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

我想要顯示它是什麼紅字顯示：試驗NAME0，測試name1（然後換行並在下一行顯示數據）。測試名稱2，測試NAME3 ......

我覺得它可能不是一個難題。但我只是不知道如何做到這一點。這裏是代碼：

_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

好的，我解決了它。

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

add width attribute to list。然後它顯示爲我想要的。