React Native flex布局不生效，无法实现标准数字键盘排列如何解决？

核心问题&修改点 #

• 第一处致命错误：所有组件绑定样式的属性你写成了复数styles，React Native 仅支持单数style属性绑定样式，这是你布局完全失效、按钮全垂直排列的根本原因。
• 第二处需要新增最后一行的居中配置：包裹数字0的行需要设置主轴居中，实现0单独居中的效果。
• 可选优化：可以移除写死的宽度配置，用flex实现自适应不同屏幕宽度的效果，适配性更强。

修改后业务代码 #

<View style={styles.container}>
  <View style={styles.row}>
    <View style={styles.buttonContainer}><Button style={styles.button} title="1" /></View>
    <View style={styles.buttonContainer}><Button style={styles.button} title="2" /></View>
    <View style={styles.buttonContainer}><Button style={styles.button} title="3" /></View>
  </View>
  <View style={styles.row}>
    <View style={styles.buttonContainer}><Button style={styles.button} title="4" /></View>
    <View style={styles.buttonContainer}><Button style={styles.button} title="5" /></View>
    <View style={styles.buttonContainer}><Button style={styles.button} title="6" /></View>
  </View>
  <View style={styles.row}>
     <View style={styles.buttonContainer}><Button style={styles.button} title="7" /></View>
     <View style={styles.buttonContainer}><Button style={styles.button} title="8" /></View>
     <View style={styles.buttonContainer}><Button style={styles.button} title="9" /></View>
  </View>
  <View style={[styles.row, styles.centerRow]}>
     <View style={styles.buttonContainer}><Button style={styles.button} title="0" /></View>
  </View>
</View>

修改后样式代码 #

const styles = StyleSheet.create({
    container: {
       flex: 1
    },
    row: {
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center'
    },
    centerRow: {
       justifyContent: 'center'
    },
    buttonContainer: {
       flex: 1,
       // 如需按钮加间距可新增 paddingHorizontal: 8 配置
    },
    button: {
       // 按需配置按钮的宽高、圆角、字号等样式
    }
  });

如果你要保留原逻辑写死按钮宽度为100，只需把buttonContainer的flex:1替换为width:100即可，其他配置不变。

内容的提问来源于stack exchange，提问作者Cannon Moyer