React Native 写入样式
React Native writing to Styles
快速提问。
是否可以更改已定义样式的值?如:
styles.container.backgroundColor?
我收到 'Attempt to write to readonly property' 错误,但这似乎很疯狂,因为我无法即时更改背景颜色。是否有我错过的最佳实践方法?
非常感谢,
一.
当您调用 StyleSheet.create
时,它会生成一个不可变对象。它这样做是为了仅使用样式表的 ID 与本地桥接来回通信。使样式表不可变可以简化通信。
但是,您可以覆盖样式表中的特定规则。以"React Native Fish"项目为例:https://github.com/istarkov/react-native-fish/blob/master/application/common/flake.js
对于您的用例,我认为它类似于:
return (
<View style={[styles.container, { backgroundColor: this.state.backgroundColor }]}></View>
);
// this.setState({backgroundColor: "#aaa"});
这已在文档中讨论过:
http://facebook.github.io/react-native/docs/style.html#content
样式根据 this.state.active
的布尔值变化
<View style={[styles.base, this.state.active && styles.active]} />
快速提问。 是否可以更改已定义样式的值?如: styles.container.backgroundColor?
我收到 'Attempt to write to readonly property' 错误,但这似乎很疯狂,因为我无法即时更改背景颜色。是否有我错过的最佳实践方法?
非常感谢, 一.
当您调用 StyleSheet.create
时,它会生成一个不可变对象。它这样做是为了仅使用样式表的 ID 与本地桥接来回通信。使样式表不可变可以简化通信。
但是,您可以覆盖样式表中的特定规则。以"React Native Fish"项目为例:https://github.com/istarkov/react-native-fish/blob/master/application/common/flake.js
对于您的用例,我认为它类似于:
return (
<View style={[styles.container, { backgroundColor: this.state.backgroundColor }]}></View>
);
// this.setState({backgroundColor: "#aaa"});
这已在文档中讨论过: http://facebook.github.io/react-native/docs/style.html#content
样式根据 this.state.active
的布尔值变化<View style={[styles.base, this.state.active && styles.active]} />