Question

我需要每行添加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,

  }

Answer 1

您可以使用Dimensions将其归档为@Qop提及here

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

导入：

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

使用：

<Grid>
    <Col></Col>
    <Col></Col>
</Grid>

这将创建两个宽度相等的列，即设备宽度的50％

Answer 2

您可以使用frame来实现这一目标。

根据需要设置button和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'
}

并使用它们

int main(){
    int i = 43;
    int a = printf("%d", i);
    int b = printf("%d", a);
    int c = printf("%d", b);
    printf("%d", c);
    return 0;
}

working example

对齐按钮，使得只有3个按钮连续

2 个答案: