Android 对齐按钮，使一行中只有3个按钮

我需要每行添加3个按钮。由于有许多设备大小，我担心我的代码会返回每行不同数量的按钮。我该怎么分类呢

因此，无论设备的宽度是多少，代码每行应始终只返回3个按钮。按钮的宽度应根据宽度自动收缩，以容纳每行3个按钮

目前，我的代码每行返回3个按钮，但当屏幕宽度改变时，数字会改变

...
  mygetButtons = () => {
    const buttons = [];
    for( let i = 0; i < 9; i++) {
       buttons.push(
         <TouchableOpacity style={styles.but}  key={i}>

            <Text> Hi </Text>

         </TouchableOpacity>
      )
    }
    return buttons;
  }

...

<View style={styles.frame}>
      {this.mygetButtons ()}
</View>

...

  frame: {
    flex: 0.5,
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: window.width
  },
  but: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 15,
    paddingRight : 115,
    paddingLeft: 5,

  }

。。。
mygetButtons=（）=>{
常量按钮=[]；
for（设i=0；i<9；i++）{
按钮(
你好
)
}
返回按钮；
}
...
{this.mygetButtons（）}
...
框架：{
弹性系数：0.5，
flexDirection:'行'，
flexWrap:“wrap”，
宽度：window.width
},
但是：{
flexDirection:'行'，
flexWrap:“wrap”，
paddingTop:15，
paddingRight:115，
paddingLeft:5，
}

您可以使用

尺寸.宽度来实现这一点

根据需要设置
框架
和
按钮
宽度

const {width} = Dimensions.get('window');

const frameWidth = width;
const columnWidth = frameWidth / 3;

并使用它们

frame: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems:'flex-start',
    justifyContent:'flex-start',
    width: frameWidth,
    backgroundColor:'blue',
},
but: {
    width: columnWidth,
    paddingTop: 15,
    paddingBottom: 15,
    alignItems:'center',
    backgroundColor:'green'
}

您可以使用
尺寸.宽度
来实现这一点

根据需要设置
框架
和
按钮
宽度

const {width} = Dimensions.get('window');

const frameWidth = width;
const columnWidth = frameWidth / 3;

并使用它们

frame: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems:'flex-start',
    justifyContent:'flex-start',
    width: frameWidth,
    backgroundColor:'blue',
},
but: {
    width: columnWidth,
    paddingTop: 15,
    paddingBottom: 15,
    alignItems:'center',
    backgroundColor:'green'
}

您可以使用前面提到的@Qop将其存档

另一种方法是使用一个包，它允许您根据需要创建行和列，而不必担心设备大小

进口：

import { Col, Row, Grid } from "react-native-easy-grid";

使用：



这将创建两个宽度相等的列，即设备宽度的50%
您可以使用前面提到的@Qop对其进行存档

另一种方法是使用一个包，它允许您根据需要创建行和列，而不必担心设备大小

进口：

import { Col, Row, Grid } from "react-native-easy-grid";

使用：



这将创建两个宽度相等的列，即设备宽度的50%
好吧，我不熟悉react，但在“普通”Android中，您可以使用它，并且您可以通过赋予它flexWrap来使用View。。。看答案它会有帮助的好吧，我不熟悉react，但在“普通”Android中，你可以使用它，你可以通过给它flexWrap来使用View。。。看看答案，这会有帮助的