Question

我在react native（Android）中使用StatusBar组件。以下是我的App.js组件的示例代码：

import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';

export default class MainApp extends Component {

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar backgroundColor='black' barStyle="light-content"/>
        <RootNavigator />
      </View>
    );
  }
}

当你启动应用程序，导航整个应用程序以及放入后台然后返回时，StatusBar正常工作。

按退回按钮退出应用程序时无效。当您再次启动应用程序时，状态栏backgroundColor突然变为灰色（默认颜色）。

这是一个已知的bug还是什么？我无法弄清楚如何解决这个问题。

Answer 1

好的，在提交问题后不久，我发现了另一种策略，使用命令式API。根据官方文件，我最初避免使用它：

对于使用组件不理想的情况，有也是一个必要的API暴露为静态函数零件。但是不建议使用静态API和同一prop的组件，因为静态API设置的任何值将被下一个渲染中的组件设置的覆盖。

这是我修改后的代码：

import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';

export default class MainApp extends Component {

  componentWillMount() {
    StatusBar.setBackgroundColor('black');
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar backgroundColor='black' barStyle="light-content"/>
        <RootNavigator />
      </View>
    );
  }
}

现在看起来这样正常。当我按下后退按钮并再次启动应用程序时，状态栏保持黑色。我不会将此声明为正确答案，以防万一有人解释为什么会发生这种情况或更好的解决方案。

修改：这似乎只有90％的时间可以使用。我偶尔注意到，当按下后退按钮并返回时，状态栏保持灰色。在这一点上绝对令人难以置信，我认为componentWillMount总是不会被触发？

Edit2 ：按照建议切换到componentDidMount而不是componentWillMount后，它现在似乎100％正常工作。

按下后退按钮后退出StatusBar backgroundColor（android）

1 个答案: