如何在react-native-elements中仅为某一类型的元素设置样式或主题

实现方案 #

React Native Elements 主题支持函数式样式配置，可以根据组件传入的props动态生成样式，刚好可以实现区分不同类型按钮样式的需求。

你只需修改主题配置中的Button规则即可，原有业务代码无需调整：

const myTheme = {
  Button: {
    buttonStyle: (props) => {
      const commonStyle = {
        borderRadius: 4
      }
      // 仅非透明类型的按钮添加背景色
      if (props.type !== 'clear') {
        return {
          ...commonStyle,
          backgroundColor: '#03E0EE'
        }
      }
      return commonStyle
    },
    titleStyle: (props) => {
      // 可根据类型自定义文字颜色，也可按需求保留统一规则
      return props.type === 'clear' ? {
        color: '#03E0EE'
      } : {
        color: '#180D43'
      }
    }
  }
}

如果只是临时需要处理个别透明按钮，也可以直接在组件上传入样式覆盖全局配置：

<Button 
  title="Secondary Button" 
  type="clear" 
  buttonStyle={{ backgroundColor: 'transparent' }} 
/>

更推荐第一种方案，统一在主题层处理所有同类按钮的样式规则，避免业务代码重复写覆盖逻辑。

内容的提问来源于stack exchange，提问作者Lee Theobald