将项目与flexbox对齐以反应原生

Question

我试图在React Native中对齐Views，我希望每个View都占据屏幕的50％。类似的东西：

我的状态是：

render(){
    return (
        <View style={{flex: 1, flexDirection: 'row'}}>
                    {this.state.companies.map(company => {
                        return (
                            <View style={{width: Dimensions.get('window').width * 0.5, height: 150}}>
                                <Image source={company.logo_url} style={{width: Dimensions.get('window').width * 0.5, height: 100}}/>
                            </View>
                        );
                    })}
                </View>
    )
}

然后在渲染方法中：

{{1}}

但我只看到前两个徽标。

如果屏幕上没有其他位置，所有项目可能会显示在一行而不是第二行。

有什么建议吗？

Answer 1

如果其他人遇到同样的问题。

我通过将flexWrap: "wrap"添加到父View

来解决了这个问题

<View style={{flex: 1, flexDirection: 'row', flexWrap: "wrap"}}>