React Native在StyleSheet中使用变量提示未找到该如何解决？

报错原因 #

你遇到的报错是作用域导致的：StyleSheet.create 是在组件函数外部执行的，不在 Tag 组件的函数作用域内，自然无法访问到组件内部声明的 state 变量 tagColor。而且 React Native 的 StyleSheet 本身是静态定义的，不支持直接传入动态变量。

解决方案 #

方案1：合并静态样式与动态内联样式 #

这是最常用的方案，你可以给 style 属性传入数组，把静态的 styles.tag 放在前面，后续的动态样式对象会覆盖前面的同名属性：

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

const Tag = (props) => {
  const [tagColor, setColor] = useState(props.color)

  return (
    <View style={styles.container}>
      {/* 数组格式合并样式，动态样式覆盖静态样式的同名字段 */}
      <TouchableOpacity style={[styles.tag, {backgroundColor: tagColor}]}>
        {/* TouchableOpacity没有title属性，需要文字请嵌套Text组件 */}
        <Text>tag</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    height: 25,
  },
  tag: {
    // 只保留静态样式，动态backgroundColor移到内联
    paddingHorizontal: 10,
    borderRadius: 4,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default Tag;

这个方案性能最优，不需要每次state变化都重新创建样式对象，适合绝大多数场景。

方案2：封装动态样式生成函数 #

如果动态样式的复用频率很高，可以把样式封装成接收参数的函数，在组件内部调用生成：

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

// 封装动态样式生成方法，可放在组件外部复用
const getTagStyles = (bgColor) => StyleSheet.create({
  tag: {
    backgroundColor: bgColor,
    paddingHorizontal: 10,
    borderRadius: 4,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

const Tag = (props) => {
  const [tagColor, setColor] = useState(props.color)
  // 组件内部调用生成对应样式
  const dynamicStyles = getTagStyles(tagColor)

  return (
    <View style={styles.container}>
      <TouchableOpacity style={dynamicStyles.tag}>
        <Text>tag</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    height: 25,
  }
});

export default Tag;

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