如何在React Native的style属性中结合三元表达式与固定样式对象

核心规则 #

React Native 的 style 属性支持传入数组，数组内的多个样式对象会按顺序合并：

• 固定样式（比如宽高、边框）放在数组前面
• 动态切换的样式（比如背景色、文字颜色）放在数组后面，后序对象的同名属性会覆盖前序的，刚好适配切换需求

实现示例 #

先把固定样式抽成单独对象，再结合三元表达式的动态样式放入数组即可：

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

// 组件内状态定义
const [selectedCourseTypeButton, setSelectedCourseTypeButton] = useState('');

// 抽离固定样式
const buttonBaseStyle = {
  width: 120,
  height: 40,
  borderWidth: 1,
  borderColor: 'green',
  borderRadius: 6,
  justifyContent: 'center',
  alignItems: 'center',
  paddingHorizontal: 10,
  marginHorizontal: 5
};

const textBaseStyle = {
  fontSize: 16,
  fontWeight: '500'
};

// 渲染组件
<TouchableOpacity
  style={[
    buttonBaseStyle,
    selectedCourseTypeButton === "Starters" 
      ? { backgroundColor: "green" } 
      : { backgroundColor: "white" }
  ]}
  onPress={() => {
    mealTypeButtonHandler('Starters');
    setSelectedCourseTypeButton("Starters");
  }}
>
  <Text 
    style={[
      textBaseStyle,
      selectedCourseTypeButton === "Starters" 
        ? { color: "white" } 
        : { color: "green" }
    ]}
  >
    Starters
  </Text>
</TouchableOpacity>

更推荐的写法：用StyleSheet.create #

StyleSheet会预编译样式，性能更好，代码更整洁：

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

const styles = StyleSheet.create({
  buttonBase: {
    width: 120,
    height: 40,
    borderWidth: 1,
    borderColor: 'green',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 10,
    marginHorizontal: 5
  },
  textBase: {
    fontSize: 16,
    fontWeight: '500'
  },
  buttonSelected: {
    backgroundColor: 'green'
  },
  buttonUnselected: {
    backgroundColor: 'white'
  },
  textSelected: {
    color: 'white'
  },
  textUnselected: {
    color: 'green'
  }
});

// 组件内状态定义
const [selectedCourseTypeButton, setSelectedCourseTypeButton] = useState('');

// 渲染组件
<TouchableOpacity
  style={[
    styles.buttonBase,
    selectedCourseTypeButton === "Starters" ? styles.buttonSelected : styles.buttonUnselected
  ]}
  onPress={() => {
    mealTypeButtonHandler('Starters');
    setSelectedCourseTypeButton("Starters");
  }}
>
  <Text 
    style={[
      styles.textBase,
      selectedCourseTypeButton === "Starters" ? styles.textSelected : styles.textUnselected
    ]}
  >
    Starters
  </Text>
</TouchableOpacity>

之前报错的常见原因 #

1. 数组里混入非样式对象：比如不小心传了字符串、数字或未定义变量
2. 样式属性拼写错误：比如把backgroundColor写成Web端的background（RN不支持）
3. 三元表达式分支返回undefined：比如判断条件写错，导致某一分支未返回样式对象

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