时间戳

首页 > 解决方案 > 如何从样式表中引用组件？-反应原生

react-native - 如何从样式表中引用组件？-反应原生

问题描述

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

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

现在我对RN的了解还很初级，但是如果我的理解正确的话，thisRN的范围和其他语言有很大的不同。再次，进一步假设我的理解是正确的，this在上面的例子中指的是styles，因此在类中没有看到myColorprop。

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

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

谢谢，

标签： react-native

解决方案

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

示例代码： 

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

推荐阅读