RN - 在样式声明中使用道具

Posted 2023-02-22

【中文标题】RN - 在样式声明中使用道具

【英文标题】：RN - Using props within style declaration

【发布时间】：2019-07-16 10:05:30

【问题描述】：

我想使用 prop 值动态添加颜色 - 与父视图相关。

我有以下 -

  <Text style=[copyStyles.copyrightTxt, copyStyles.copyColorthis.Props.Color]>&copy; Copyright 2019 LRM Security Ltd</Text>

将通过以下方式设置样式：

const copyStyles = StyleSheet.create(

  copyColorOrange:
    color:'#f79431',
  
 );

但我收到一个错误“意外令牌” - 谁能告诉我哪里出错了？

【问题讨论】：

你为什么不把颜色设置为orange 而不是你所拥有的？会容易很多

这是依赖于父视图的背景颜色的 3 种样式之一 - 样式颜色作为 prop 传入

Can I make dynamic styles in React Native?的可能重复

【参考方案1】：

您可以通过两种方式访问​​对象的属性：

objectName.propertyName

或者您可以使用允许您使用字符串的替代方式

objectName["propertyName"]

您应该使用替代方法通过构造您需要的字符串来访问样式对象中的值。

 copyStyles[`copyColor$this.props.Color`]

props 也不是全部小写吗？

【参考方案2】：

更好的方法是嵌套你的属性：

const copyStyles =    
copyColor:
    Orange:
        color:'#f79431',
    
  
 ;

并使用：copyStyles.copyColor[this.props.Color]