React Native 中的文本颜色没有变化

Question

所以我正在使用 Typescript 搞乱 React Native，我试图实现一个暗模式系统（一旦我让它工作，它将进入 Redux 状态）但是，我的背景正在改变颜色，但我的文本没有。

我看到React Native Text color not working 我的状态正在更新，因为我的背景颜色正在改变。

import React from 'react';
import { StyleSheet, Text, StatusBar, SafeAreaView, AsyncStorage, Button } from 'react-native';

export interface Props{
  name: string;
}

export interface State{
  darkmode: boolean;
  ready:boolean;
}

export interface DarkModeStyle{
  backgroundColor: string;
  color: string
}

export interface LightModeStyle{
  backgroundColor: string;
  color: string
}

export default class BeaconAppFrame extends React.Component<Props, State>{
  private styles;

  public state : State = {
    darkmode:false,
    ready:false
  }

  public darkModeStyle : DarkModeStyle = {
    backgroundColor:"#555", 
    color:"#EEE"
  }

  public lightModeStyle : LightModeStyle = {
    backgroundColor:"#FFF",
    color:"#000"
  }

  constructor(props: Props){
    super(props);

    // setup the default frame styles
    this.styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
      }
    });
  }

  componentDidMount(){
    AsyncStorage.getItem('darkmode').then( (darkmode) => {
      this.setState({darkmode:darkmode === "yes", ready:true});
    }).catch(() => {
      this.setState({darkmode:false, ready:true});
      AsyncStorage.setItem("darkmode", "no");
    });
  }

  enableDarkMode(){
    this.setState({"darkmode":!this.state.darkmode});
    AsyncStorage.setItem("darkmode", this.state.darkmode?"yes":"no");
  }

  render(){
    if(this.state.ready){
      let style = [this.styles.container, this.state.darkmode?this.darkModeStyle:this.lightModeStyle];
      console.log(style);
      return (
        <SafeAreaView style={style}>
          <StatusBar barStyle="light-content" hidden={true} translucent={false} />
          <Text>darkmode is set to {this.state.darkmode? "Active":"Inactive"}</Text>
          <Button onPress={this.enableDarkMode.bind(this)} title={"Toggle darkmode"}>
            <Text>Toggle Darkmode</Text>
          </Button>
        </SafeAreaView>
      );
    }else{
      return (
        <SafeAreaView style={this.styles.container}>
            <Text>Please Wait Loading</Text>
        </SafeAreaView>
      )
    }
  }
}

Answer 1

你必须直接在 Text 组件上设置颜色样式属性。

Answer 2

这应该可行：

<Text style={{ color: this.state.darkmode ? "#EEE" : "#000" }}>darkmode is set to {this.state.darkmode? "Active":"Inactive"}</Text>

基本上，您需要将样式类中的color 应用到Text 组件，而不是应该只保留backgroundColor 的SafeAreaView。