如何在 React Native 中添加按钮网格样式？

Question

我最近将手放在 react-native 上，并尝试将按钮动态添加到视图中。我想要一个结构，如：

（在引导程序中，我会添加一个带有 col-md-4 的类）

[A] [A] [A] [A]

[A] [A] [A] [A] 

[A] [A] [A] [A] 

我已经可以添加按钮，但它们总是出现在新行中。

IE

[A]
[A]
[A]

到目前为止，我添加的样式和功能：

const styles = StyleSheet.create({
    container: {
        marginTop: 65,
        flex: 1,
    },
})

render(){
    return (
        <View style={styles.container}>
            {this.renderButtons()}
        </View>
    )
}
renderButtons(){
    var list = myArray.map((item, index) => {
        return (
            <View key={index}>
                <TouchableHighlight
                    style={styles.button}>
                </TouchableHighlight>
            </View>
        )
    })
    return list;
}

我知道我应该在 renderButtons 下的 View 添加某种样式，但我不知道从哪里开始。然而。

Answer 1

在 React Native 中默认flexDirection为column，这意味着弹性项目将垂直堆叠。

您需要切换flexDirection到row.

参考：

• http://moduscreate.com/react-native-layout-system/
• https://facebook.github.io/react-native/docs/flexbox.html

Answer 2

正确的方法是flexWrap: "wrap"在您的样式中使用。