React native 如何从样式表中引用组件-自然反应

全新的反应。我正拿着我找到的小吃四处玩耍。以下是我所拥有的：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {

    constructor(props){
        super(props)
        this.myColor = 'blue'
        this.state = {myColor: 'red')
    }

    render() {
        return (
            <View>
                <Text style={styles.myStyle}>Lorem Ipsum</Text>
           </View>
        );
    }
}

const styles = StyleSheet.create({
    myStyle: {
        color: this.myColor,
        fontWeight: 'bold',
        fontSize: 30,
    },
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
导出默认类LotusStyles扩展组件{
建造师（道具）{
超级（道具）
this.myColor='blue'
this.state={myColor:'red'）
}
render（）{
返回(
乱数假文
);
}
}
const styles=StyleSheet.create({
我的风格：{
颜色：这个，我的颜色，
fontWeight:'粗体'，
尺寸：30，
},
});

上面的代码没有崩溃；事实上，它输出了预期的“Lorem Ipsum”。但是，文本的颜色不是蓝色，而是黑色，这表明样式表的颜色没有被正确读取

现在我对RN的了解非常初级，但是如果我的理解是正确的，

这个

在RN中的范围与其他语言有很大不同。再次，假设我的理解是正确的，

这个

在上面的例子中指的是

样式

，因此在类中看不到

myColor

属性。

所以我的问题是：如何引用实际的类

或者从样式表中引用类被认为是不好的做法，应该完全避免吗？（如果是这样，什么是“好”做法？）

---

谢谢，

如果您有预定义的颜色，请在常量中使用 如果要更改某些事件的颜色，请将其保存在状态变量中

示例代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const myColor = 'blue'
export default class LotsOfStyles extends Component {

  constructor(props) {
    super(props);
    this.state = ({ color: 'red' })
  }

  render() {
    return (
      <View>
        <Text style={styles.myStyle}>Lorem Ipsum</Text>
        <Text style={[styles.myStyle, { color: this.state.color }]}>Lorem Ipsum</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  myStyle: {
    color: myColor,
    fontWeight: 'bold',
    fontSize: 30,
  },
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
常量myColor='蓝色'
导出默认类LotusStyles扩展组件{
建造师（道具）{
超级（道具）；
this.state=（{color:'red'}）
}
render（）{
返回(
乱数假文
乱数假文
);
}
}
const styles=StyleSheet.create({
我的风格：{
颜色：myColor，
fontWeight:'粗体'，
尺寸：30，
},
});

如果您有预定义的颜色，请在常量中使用它 如果要更改某些事件的颜色，请将其保存在状态变量中

示例代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const myColor = 'blue'
export default class LotsOfStyles extends Component {

  constructor(props) {
    super(props);
    this.state = ({ color: 'red' })
  }

  render() {
    return (
      <View>
        <Text style={styles.myStyle}>Lorem Ipsum</Text>
        <Text style={[styles.myStyle, { color: this.state.color }]}>Lorem Ipsum</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  myStyle: {
    color: myColor,
    fontWeight: 'bold',
    fontSize: 30,
  },
});

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
常量myColor='蓝色'
导出默认类LotusStyles扩展组件{
建造师（道具）{
超级（道具）；
this.state=（{color:'red'}）
}
render（）{
返回(
乱数假文
乱数假文
);
}
}
const styles=StyleSheet.create({
我的风格：{
颜色：myColor，
fontWeight:'粗体'，
尺寸：30，
},
});

如果不想更新颜色，请将其设置为常量

const colorBlue = 'blue'

如果您在多个地方使用这种颜色，那么创建一个类color.js并编写如下代码

export default {
    blue: 'blue',
    black: 'black'
}

要在哪个类中使用它，只需导入颜色类并按如下方式设置颜色

const styles = StyleSheet.create({
    myStyle: {
        color: Color.blue,
        fontWeight: 'bold',
        fontSize: 30,
    },
});

如果您在运行时更改颜色，请在状态下设置颜色

 constructor(props) {
    super(props);
    this.state = ({ color: 'red' })
  }

const styles = StyleSheet.create({
    myStyle: {
        color: this.state.color,
        fontWeight: 'bold',
        fontSize: 30,
    },
});

---

如果不想更新颜色，请将其设置为常量

const colorBlue = 'blue'

如果您在多个地方使用这种颜色，那么创建一个类color.js并编写如下代码

export default {
    blue: 'blue',
    black: 'black'
}

要在哪个类中使用它，只需导入颜色类并按如下方式设置颜色

const styles = StyleSheet.create({
    myStyle: {
        color: Color.blue,
        fontWeight: 'bold',
        fontSize: 30,
    },
});

如果您在运行时更改颜色，请在状态下设置颜色

 constructor(props) {
    super(props);
    this.state = ({ color: 'red' })
  }

const styles = StyleSheet.create({
    myStyle: {
        color: this.state.color,
        fontWeight: 'bold',
        fontSize: 30,
    },
});

---

构造函数中的this.color仅在

LotsOfStyles

上引用，因此您需要在样式表状态中添加

color:'blue'

在构造函数中，然后在样式表中，尝试访问如下颜色=color:this.state。myColor@yesIamFaded我已经尝试过这样做，但是当我尝试通过this.state.colorthis.color访问它时，我得到一个错误

myColor未定义

，构造函数中的color仅在

LotsOfStyles

上引用，因此您需要添加

color:'blue'

在您的样式表状态={myColor:'blue}在构造函数中，然后在样式表中，尝试访问如下颜色=color:this.state。myColor@yesIamFaded我已经试过这么做了，但是当我试图通过this.state.colorThank访问它时，我得到了一个错误

myColor是未定义的

课堂。（示例中的第3行）谢谢，这似乎有效。对我来说，关键是将myColor声明带到课堂之外。（示例中的第3行）