Question

我是React-Native的新手。假设我有一个styleSheet，其中包含一个绿色按钮的样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff', 
  },
  greenB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
    backgroundColor:'green',    
  }, ........

由于某种原因，我需要在代码中更改该颜色。

render(){
....
const {container, greenB}=styles; //Not sure, how else can I define greenB?

greenB.backgroundColor='black';

return (
      <View style={styles.container}>
          <View style={styles.greenB} >
          ....

如何从greenB访问backgroundColor并进行更改？我收到TypeError“试图分配给只读属性”，合理的原因样式是const。试图阅读有关状态管理的信息，但不确定在这种情况下如何使用它。

Answer 1

React Native的 StyleSheet.create 用于获得更好的性能和简洁的代码，它缓存样式ID以减少通过网桥的数据量，因此这就是为什么您不能更改它，但是只能使用它。

但是有很多解决方案，您可以使用简单的javascript对象并根据需要更改值。

例如：-

let Styles= {
            Text:{ 
                 color:'blue'
                 }
          }
Styles.Text.color= 'green'


<Text style={Styles.Text} > </Text>

此外，对于动态样式，我建议使用状态而不是变量。

访问样式属性并对其进行更改

1 个答案: