带有默认样式表的动态内联样式 React Native

Posted 2023-02-22

【中文标题】带有默认样式表的动态内联样式 React Native

【英文标题】：Dynamic inilne style with default StyleSheet React Native

【发布时间】：2016-12-11 10:24:08

【问题描述】：

我需要使用静态默认样式表样式提供动态内联样式。我怎样才能做到这一点

<View 
    style=[styles.card,width:width,  height: height]>
             <View style=styles.card>
                <Text>
                  <Image
                    source=uri: this.props.media.image_url
                    style=width:width,  height: this.props.media.height/>
                </Text>
             </View>
 </View>

上面的代码不适合我。

【问题讨论】：

如果您要进行服务器渲染，您将来可能需要更改一些内容，因为服务器渲染不支持样式加载器

服务器渲染有什么解决方案？

使用github.com/webpack/extract-text-webpack-plugin这会将所有css合并到一个文件中。

这是 React Native，服务器渲染不是问题。

【参考方案1】：

不，问题不在于顺序，您没有正确传递动态（内联样式）。您将它们包裹在额外的花括号中

改变这个：

style=[styles.card,width:width,  height: height]

到：

style=[styles.card,width:width,  height: height]

您在上面的回答中实际上做了同样的事情。

【参考方案2】：

终于在尝试了很多之后，我能够解决它。 这是代码

  <View 
    <View style=[width:width,  height: height,styles.card]>
         <View style=styles.card>
            <Text>
              <Image
                source=uri: this.props.media.image_url
                style=width:width,  height: this.props.media.height/>
            </Text>
         </View>
    </View>
 </View>

【讨论】：

澄清解决方案：样式的顺序做很重要，它们从左到右应用，所以styles.card覆盖了宽度和高度。