Question

我有一个具有多个屏幕的本机应用程序。每个组件都有自己的状态栏来定义其颜色（请参阅代码ex组件）。当启动应用程序时，会显示正确的颜色，但是当我转到使用其他颜色的屏幕（黑色而不是白色，反之亦然）时，它会正确更改，但之后在进一步导航时不再发生变化。看起来颜色只能改变一次。

render() {
  return (
    <View style={theme.container}>
      <StatusBar
        translucent={false}
        backgroundColor={S.COLOR_STATUS_BAR_DARK}
        barStyle="dark-content"
      />
      {this.props.isFetching || this.props.isSubmitting
        ? <Spinner />
        :
        <View style={theme.container}>
          { this.renderAlarms() }
        </View>
      }
    </View>
  );
}

我在这里做错了吗？

Answer 1

我认为你的组件没有重新渲染 A ---＆gt; 乙
当A渲染。状态栏颜色：红色
当B渲染时。状态栏颜色：蓝色
回到答：A不是重新渲染。状态栏颜色：蓝色，

如果A组件重新渲染，则此问题将解决。

Answer 2

重新渲染组件确实起到了作用。感谢您的反馈。

Answer 3

您还可以使用静态setBackgroundColor功能更改状态的颜色。

我建议您在componentDidMount或componentWillMount和componentWillUnmount设置状态颜色，以设置回以前的状态颜色，如下例所示。

componentDidMount() {
  StatusBar.setBackgroundColor('red');
}
componentWillUnmount() {
  StatusBar.setBackgroundColor('white');
}

React Native Statusbar错误的颜色

3 个答案: