Question

React Native的全新功能。我在玩here发现的小吃。以下是我所拥有的：

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,
    },
});

上面的代码不会崩溃；实际上，它会按预期输出“ Lorem Ipsum”。但是，文本的颜色不是蓝色-它是黑色，表示样式表的颜色未正确读取。

现在，我对RN的知识非常初级，但是如果我的理解是正确的，则RN中的this与其他语言的作用范围非常不同。同样，进一步假设我的理解是正确的，以上示例中的this指的是styles，因此在类中看不到myColor道具。

所以我的问题是：您如何引用实际的课程？

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

谢谢

Answer 1

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

示例代码：

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,
  },
});

Answer 2

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

const colorBlue = 'blue'

如果您在多个地方使用此颜色，则创建一个Color.js类并编写如下代码

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

要在哪个类中使用它，只需导入Color类并像这样设置Color

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,
    },
});

如何从样式表中引用组件？ -反应本机

2 个答案: