React Native如何实现等大网格按钮布局并设置尺寸与间距？

React Native 原生Button组件不支持直接传入style属性自定义尺寸、边距，你代码里写的styles.button实际不会生效。要实现调大按钮尺寸、统一按钮大小、添加按钮间距的需求，给每个Button外层包裹一层View容器控制样式即可，修改后的完整代码如下：

import React from 'react';
import {View, Text, SafeAreaView, Button, StyleSheet} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = (props) => {
   const navigation = useNavigation();
   return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 100}}>
        <View>
        <View style={styles.container}>
            <View style={styles.buttonWrap}>
              <Button
                  title="aw"
                  onPress={() => navigation.navigate('cameraScreenStack')}
              />
            </View>
            <View style={styles.buttonWrap}>
              <Button
                  title="bdsfw"
                  onPress={() => navigation.navigate('ledgerScreenStack')}
              />
            </View>
        </View>
        <View style={styles.container}>
            <View style={styles.buttonWrap}>
              <Button
                  title="cwd"
                  onPress={() => navigation.navigate('recommendScreenStack')}
              />
            </View>
            <View style={styles.buttonWrap}>
              <Button
                  title="ddfa"
                  onPress={() => navigation.navigate('settingScreenStack')}
              />
            </View>
        </View>
        </View>
      </View>
    </SafeAreaView>
    );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    // 控制两行按钮之间的垂直间距
    marginVertical: 12,
  },
  buttonWrap: {
    // 统一所有按钮宽度，调大数值即可放大按钮尺寸
    width: 130,
    // 控制同一行两个按钮之间的水平间距
    marginHorizontal: 10,
  }
});

参数调整说明 #

• 按钮尺寸：直接修改buttonWrap的width值即可，数值越大按钮越宽
• 间距调整：同一行按钮的左右间距改buttonWrap的marginHorizontal，两行按钮的上下间距改container的marginVertical，按需改数值就行
• 高阶自定义：如果需要更自由的样式定制（比如改按钮背景色、圆角、文字大小），不要用原生Button，换成TouchableOpacity或者Pressable组件自己写按钮结构，自定义程度更高，示例写法：

import { TouchableOpacity } from 'react-native';

// 替换原有Button位置
<TouchableOpacity
  style={styles.customBtn}
  onPress={() => navigation.navigate('cameraScreenStack')}
>
  <Text style={styles.customBtnText}>aw</Text>
</TouchableOpacity>

// 对应样式
customBtn: {
  width: 130,
  paddingVertical: 12,
  backgroundColor: '#1677ff',
  borderRadius: 8,
  marginHorizontal: 10,
  alignItems: 'center'
},
customBtnText: {
  color: '#fff',
  fontSize: 16
}

内容的提问来源于stack exchange，提问作者김소흥