如何在React Native中添加按钮网格样式？ [英] How to add buttons grid style in React Native?

问题描述

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

（在bootstrap中，我将添加一个类col-md-4）

  [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; 
 
 
 
 $ b 
我知道我应该在renderButtons下添加一个特定的样式，但是我不会不知道从哪里开始。解决方案正确的方法是使用 flexWrap：wrap   c $ c>在你的风格。
 
I recently placed my hands on react-native and am trying to add buttons dynamically to a view. I would like to have a structure like:

( in bootstrap I would add a class with col-md-4 )
[A] [A] [A] [A]

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

[A] [A] [A] [A] 
I already can add the the buttons but they always appear in a new line. 

ie
[A]
[A]
[A]
the added style and function that I have so far:
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;
}
I know I should add a certain style to the View under renderButtons but I don't know where to start. Yet.
解决方案
The correct way to do this is to use flexWrap: "wrap" in your styles.

                        
这篇关于如何在React Native中添加按钮网格样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！