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

【问题标题】：Dynamic inilne style with default StyleSheet React Native带有默认样式表的动态内联样式 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，服务器渲染不是问题。

标签： reactjs react-native react-router flux

【解决方案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覆盖了宽度和高度。