react-native ListView换行符

Question

listview换行到下一行，每行有两个项目，这里是数据源：

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

我想将其显示为红色单词显示的内容：test name0，test 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

好吧，我解决了。

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

将width属性添加到list。然后它显示我想要的东西。