Question

我在应用中使用抽屉式导航，其中主屏幕的状态栏设置为透明，如下所示：

Home.js： <StatusBar translucent={true} backgroundColor={'transparent'} barStyle="dark-content" />

如果我导航到另一条具有相同状态栏且具有不同barStyle的路线，则效果也很好：

Second.js：<StatusBar translucent={true} backgroundColor={'transparent'} barStyle="light-content" />

但是，如果我要返回主屏幕（使用抽屉），则barStyle不会恢复为dark-content。

在文档中指出状态栏颜色应基于路线而无需重新渲染的情况下，为什么会发生这种情况？https://reactnavigation.org/docs/en/status-bar.html

Answer 1

正如安德鲁（Andrew）在他的comment中所指出的，最好是使用导航事件来管理StatusBar，我最终订阅了导航事件侦听器，以便更改每个状态栏的StatusBar颜色和样式我的看法：

componentDidMount() {
    const onWillFocusSubscription = this.props.navigation.addListener(
        'willFocus',
        payload => {
            StatusBar.setBarStyle("dark-content");
            StatusBar.setBackgroundColor("transparent");
            StatusBar.setTranslucent(true);
        }
    );
}

componentWillUnmount() {
    onWillFocusSubscription.remove();
}

根据视图反应本机状态栏配置

1 个答案: