在本机样式表中使用变量不会识别变量

Question

我将颜色作为 props.color 导入我的功能组件并将其设置为状态 'tagColor'。当我在样式表中使用 tagColor 作为值来设置背景颜色时，我收到错误 'variable tagColor not found'

如何在样式表中使用变量？

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

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

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    height: 25,
    display: 'flex'
  },
  tag: {
    backgroundColor: tagColor,  
}
});

export default Tag;

Answer 1

嗯，当然它不识别tagColor，它在不同的范围内。注意 tagColor 在函数组件的范围内，而 StyleSheet 是不同的范围。

解决这个问题的一种方法是直接将 backgroundColor 传递给 style 属性，就像这样：

<TouchableOpacity style={{backgroundColor: tagColor}} title="tag">

另一种方法是将 StyleSheet 中的 tag class 定义为接收颜色和 returns 样式的函数，例如：

const styles = StyleSheet.create({
  container: {
    ...
  },
  tag: tagColor => ({
    backgroundColor: tagColor,  
})
});

然后像这样使用它：

<TouchableOpacity style={styles.tag(tagColor)} title="tag">

如果除了 backgroundColor 没有其他样式，我会选择第一种方式。如果您需要更多样式，请使用第二种方法。

在本机样式表中使用变量不会识别变量

Using variables inside react native stylesheets wont recognize the variable

javascript

reactjs

react-native

react-native-stylesheet