React Native中是否可以在StyleSheet内使用三元运算符？

问题结论 #

React Native 的 StyleSheet.create 是静态样式生成API，不支持直接在内部使用依赖运行时状态的三元运算符，因为它会在代码加载阶段就完成样式缓存，不会响应后续运行时的变量（比如colorScheme、组件props）变化。

如果你不想使用「内联样式+外部样式」的数组拼接写法，可以用以下两种成熟方案实现需求：

方案1：封装函数式动态样式 #

把样式生成逻辑封装为接收动态参数的函数，运行时传入当前状态值生成对应样式：

组件代码

<TextInput
  defaultValue={selectedEvent ? selectedEvent.title : ""}
  style={getStyles(colorScheme).textInput}
  onChangeText={inputChangeHandler}
/>

样式代码

import { StyleSheet } from 'react-native';

// 接收颜色模式作为参数，动态生成样式表
const getStyles = (colorScheme: 'light' | 'dark') => StyleSheet.create({
  textInput: {
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
    marginBottom: 15,
    paddingVertical: 4,
    paddingHorizontal: 2,
    // 直接在样式定义中使用三元运算符
    color: colorScheme === "dark" ? "#ffffff" : "#000000"
  },
})

方案2：封装自定义样式Hook（适合多组件复用主题） #

如果你的项目全局都需要适配深浅色模式，可以封装通用的样式Hook，自动获取当前颜色模式生成对应样式，无需每个组件单独传参：

封装Hook

import { StyleSheet, useColorScheme } from 'react-native';

export const useAppStyles = () => {
  const colorScheme = useColorScheme() ?? 'light';
  
  return StyleSheet.create({
    textInput: {
      borderBottomColor: "#ccc",
      borderBottomWidth: 1,
      marginBottom: 15,
      paddingVertical: 4,
      paddingHorizontal: 2,
      color: colorScheme === "dark" ? "#ffffff" : "#000000"
    },
    // 其他全局通用样式都可以在这里定义
  })
}

组件内使用

import { useAppStyles } from './your-hook-path';

const YourComponent = () => {
  const styles = useAppStyles();
  
  return (
    <TextInput
      defaultValue={selectedEvent ? selectedEvent.title : ""}
      style={styles.textInput}
      onChangeText={inputChangeHandler}
    />
  )
}

补充说明 #

以上两种方案的性能损耗可以忽略不计：StyleSheet.create本身的计算开销极低，远低于每次渲染生成内联样式对象的开销，完全可以在生产环境放心使用。

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