在React中，你可以清楚地创建一个对象，并将其赋值为内联样式。即. .下面所提到的。
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
var divStyle2 = {fontSize: '18px'};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
如何组合多个对象并将它们分配在一起?
当前回答
我发现这个方法最适合我。它会像预期的那样重写。
return <View style={{...styles.local, ...styles.fromProps}} />
其他回答
我发现这个方法最适合我。它会像预期的那样重写。
return <View style={{...styles.local, ...styles.fromProps}} />
对于那些在React中寻找这个解决方案的人，如果你想在风格中使用扩散操作符，你应该使用:babel-plugin-transform-object-rest-spread。
通过npm模块安装它，并配置你的.babelrc:
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}
然后你可以用like…
const sizing = { width: 200, height: 200 }
<div
className="dragon-avatar-image-background"
style={{ backgroundColor: blue, ...sizing }}
/>
更多信息:https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/
你也可以像这样将类与内联样式结合起来:
<View style={[className, {paddingTop: 25}]}>
<Text>Some Text</Text>
</View>
需要合并对象中的属性。 例如,
const boxStyle = {
width : "50px",
height : "50px"
};
const redBackground = {
...boxStyle,
background: "red",
};
const blueBackground = {
...boxStyle,
background: "blue",
}
<div style={redBackground}></div>
<div style={blueBackground}></div>
你可以使用作曲
const styles = StyleSheet.create({
divStyle :{
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
},
divStyle2 :{fontSize: '18px'}
})
React.render(<div style={StyleSheet.compose(styles.divStyle, styles.divStyle2)}>Hello World!</div>, mountNode);
OR
React.render(<div style={[styles.divStyle, styles.divStyle2]}>Hello World!</div>, mountNode);
