Javascript 如何在React native中更改整个应用程序的主题？

我想通过从颜色列表中选择来更改应用程序的主题（比如背景色）。我已经试着将状态保存在一个reducer中，并将状态应用到一个新页面

LoginView.js

从“/styles”导入样式；
类LoginView扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
primaryColor:theme.PRIMARY\u颜色
};
}
导航=（）=>{
这个.props.navigation.navigate（“Home”）；
};
onPressGreen=（）=>{
theme.PRIMARY_COLOR=“绿色”；
this.setState（{primaryColor:theme.PRIMARY_COLOR}）；
此.props.on按绿色按钮（主题.主色）；
};
onPressRed=（）=>{
theme.PRIMARY_COLOR=“红色”；
this.setState（{primaryColor:theme.PRIMARY_COLOR}）；
};
render（）{
返回(
绿色
红色
家
);
}
}
功能图DispatchToprops（调度）{
返回{
按绿色按钮：颜色=>dispatch（loginActions.saveColor（颜色））
};
}
导出默认连接(
无效的
mapDispatchToProps
)（LoginView）；

HomeView.js

类HomeView扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
家
);
}
}
函数MapStateTops（状态）{
返回{
颜色：state.loginReducer.color//保存在reducer中的颜色
};
}
导出默认连接(
MapStateTops，
无效的
)（HomeView）；

---

在HomeView.js文件中，如何将其包含在styles.container中，而不是像我那样应用backgroundcolor。有没有办法访问我导入的styles.js中的函数mapStateToProps。我用redux永久保存了这个州

您可以在react组件之外使用redux，比如styles.js 中的by store.getState（）API 但我认为处理这个问题的最好方法是创建一个包装器组件，并将它们应用于它，然后在任何地方使用它

class MasterView extends Component {
  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color }]}>
         {this.props.children}
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.loginReducer.color //color saved in reducer
  };
}

export default connect(
  mapStateToProps,
  null
)(MasterScreen);

---

我不明白。单击绿色按钮时，请参见我的登录视图页面。我调用函数mapDispatchToProps将新颜色保存在reducer中，然后在HomeView页面中使用函数mapStateToProps。我正在为每个屏幕编写一个样式页。那么我如何从mapStateToProps中得到这个颜色值到一个styles.js文件，这个文件是一个纯样式表组件，没有其他内容。但有一个问题，当我把背景颜色：containerColor，我得到一个错误“提供给样式表容器的prop backgroundColor无效。请记录您的containerColor值可能作为颜色无效问题是当我尝试在HomeView页面中获取containerColor的值时，我获取了该颜色。但是，当我尝试在styles.js页面中执行相同操作时，它就像这样空白。为什么会这样？让我们来看看。

class HomeView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color }]}>
        <Text>Home</Text>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.loginReducer.color //color saved in reducer
  };
}

export default connect(
  mapStateToProps,
  null
)(HomeView);

class MasterView extends Component {
  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color }]}>
         {this.props.children}
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.loginReducer.color //color saved in reducer
  };
}

export default connect(
  mapStateToProps,
  null
)(MasterScreen);

class HomeView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <MasterView>
          <Text>Home</Text>
      </MasterView>
    );
  }
}

import store from '../store'

const containerColor=store.getState().loginReducer.color

const styles = StyleSheet.create({
  container: {
    backgroundColor:containerColor
  },
}

export default styles