反応し、ネイティブのリストビューラインフィード

Question

リストビューラインフィード、二つのアイテムを持つすべての行は、データソースです：テストNAME0、テストを：

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

私は赤の言葉が示しているものと、それを表示したいですname1（改行とデータが次の行に表示されます）。テスト名2、テスト名3 ...

難しい問題ではないかもしれないと思います。しかし、私はちょうどそれを作る方法を知らない。コードは次のとおりです。

_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、私はそれを解決しました。

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

listにwidth属性を追加します。それは私が望むものとして示す。