Question

我正在反应本机组件，根据其属性，它使用两种主要颜色。由于我想在样式表中访问该变量，因此我在类外部而不是在状态中声明它。首先，我将其声明为蓝色，然后在构造函数中，将其值更改为绿色。但是，它使用的文本仍为蓝色。我知道它与渲染有关，但是我认为，因为我更改了生命周期中第一个类构造器中的值，所以它可以工作。

我不想在JSX样式标签中使用函数，因此有解决方案吗？

let mainColor = Colors.blue1;

export default class Article extends Component {

    constructor(props) {
        super(props);
        mainColor = Colors.green;
        this.state={
            liked: false,
            withHeroImage: false
        }
    }


    render() {
        return (

           <Text style={styles.title}>Lorem ipsum</Text>
        );
    }
}

const styles = StyleSheet.create({
    title:{
        fontSize: 20,
        color: mainColor,
        fontFamily: FontFamily.PoppinsSemibold,
        marginBottom: 20
    }
})

Answer 1

我认为您无法在创建后修改样式表，并且不清楚为什么要这样做。

在您的示例中，您可以将动态属性添加到Text标记中，如下所示：

<Text style={[styles.title, {color:mainColor}]}>Lorem ipsum</Text>

Answer 2

 let mainColor = Colors.blue1;

export default class Article extends Component {

  constructor(props) {
    super(props);
    this.state={
        liked: false,
        withHeroImage: false,
        mainColor = Colors.green;
    }
}

render() {
    return (

       <Text style={[styles.title, color: this.state.mainColor]}>Lorem ipsum</Text>
    );
}}

  const styles = StyleSheet.create({
title:{
    fontSize: 20,
    fontFamily: FontFamily.PoppinsSemibold,
    marginBottom: 20
}
})

尝试这种方式。只是更新变量不会进行任何更改。要在渲染部分中进行更改，应在setState或prop中进行更改。因此，如果您要更新颜色，请按照上述方法在setState中获取颜色并将其分配给样式。希望能帮到您!!!!

Answer 3

如果您的React版本是16.8或更高版本，则可以使用效果hook。

a link允许我直接执行我的答案

用法

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';


export default function Article() {
  const [maincol, setColor] = useState("blue");

  const styles = StyleSheet.create({
    title:{
        fontSize: 20,
        color: maincol,
        marginBottom: 20
    }
})

  useEffect(() => {
    console.log(maincol);
  });

        return (
          <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           <Button title="change color" onPress={() => setColor("green")} />
           <Text style={styles.title}>Lorem ipsum</Text>
           </View>
        );
}

如何设置可以在样式中使用的变量

3 个答案: