React Native 状态栏颜色错误

Posted 2023-04-18

【中文标题】React Native 状态栏颜色错误

【英文标题】：React Native Statusbar wrong color

【发布时间】：2018-07-05 14:59:54

【问题描述】：

我有一个带有多个屏幕的 react 本机应用程序。每个组件都有自己的状态栏来定义其颜色（参见代码前组件）。启动应用程序时，会显示正确的颜色，但是当我进入使用另一种颜色（黑色而不是白色，反之亦然）的屏幕时，它会正确更改，但之后在进一步导航时不会再更改。颜色好像只能换一次。

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

我在这里做错了吗？

【参考方案1】：

我认为您的组件没有重新渲染。A ---> B 当 A 渲染。状态栏颜色：红色 当 B 渲染。状态栏颜色：蓝色 回到 A。A 没有重新渲染。状态栏颜色：蓝色，

如果A组件重新渲染，这个问题就解决了。

【参考方案2】：

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

【讨论】：

如果这是正确的解决方案，则将答案标记为正确（绿色检查图像），如果有帮助，请点赞我的评论。

【参考方案3】：

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

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

componentDidMount() 
  StatusBar.setBackgroundColor('red');

componentWillUnmount() 
  StatusBar.setBackgroundColor('white');