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

Posted 2023-03-06

【中文标题】如何在 React Native 中添加按钮网格样式？

【英文标题】：How to add buttons grid style in React Native?

【发布时间】：2016-07-26 23:44:42

【问题描述】：

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

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

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

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

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

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

即

[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 中添加某种样式，但我不知道从哪里开始。然而。

【参考方案1】：

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

【参考方案2】：

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

您需要将flexDirection 切换为row。

参考资料：

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