如何在React Native中实现填充样式按钮并解决Expo端渲染异常

React Native 内置的 Button 组件优先适配平台原生样式，iOS 端默认会忽略自定义样式配置，仅渲染为纯文本样式，无法直接设置背景色、圆角等属性。

方案1：使用 TouchableOpacity 自定义可复用按钮 #

TouchableOpacity 自带点击透明度反馈，完全支持自定义样式，适配全端显示效果一致，是最常用的自定义按钮实现方案。

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// 封装可复用按钮组件
const CustomButton = ({ title, onPress, bgColor = '#2563eb' }) => {
  return (
    <TouchableOpacity 
      style={[styles.buttonContainer, { backgroundColor: bgColor }]}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonContainer: {
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 8, // 自定义圆角
    alignItems: 'center'
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '500'
  }
})

// 业务代码中调用
// <CustomButton title="确认提交" onPress={() => handleSubmit()} />

方案2：使用 Pressable 实现多状态交互按钮 #

如果需要实现按下、聚焦等不同状态下的样式变化，可使用 React Native 官方推荐的 Pressable 组件：

import { Pressable, Text, StyleSheet } from 'react-native';

const StatefulButton = ({ title, onPress }) => {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.baseBtn,
        pressed ? styles.pressedBtn : styles.defaultBtn
      ]}
    >
      <Text style={styles.btnText}>{title}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  baseBtn: {
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 8
  },
  defaultBtn: {
    backgroundColor: '#2563eb'
  },
  pressedBtn: {
    backgroundColor: '#1d4ed8' // 按下时背景色变暗
  },
  btnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500'
  }
})

排查注意事项 #

• 不要直接修改内置 Button 组件的 style 属性，该属性在 iOS 端不会生效，仅可通过 color 字段修改文字颜色
• 若Expo预览时样式不生效，可执行 npx expo start --clear 清除缓存后重新预览，排除旧缓存导致的样式异常
• 自定义触摸组件必须嵌套 Text 组件承载文字内容，不能直接在触摸组件上填写文字

内容的提问来源于stack exchange，提问作者Andrew Hill