时间戳

首页 > 解决方案 > 如何使用 React Native 正确实现组件中的状态栏

reactjs - 如何使用 React Native 正确实现组件中的状态栏

问题描述

我有任务需要将状态栏从白色更改为暗色。现在我搜索状态栏如何实现到组件。是的，它工作正常。后来我遇到了错误，如果我重新渲染整个应用程序，我的意思是当我再次打开应用程序时。我改变它的状态栏变成了原来的蓝色。因此，为了详细说明，我将向您展示我实现的代码以及我创建的应用程序的屏幕截图。

这是我阅读的一些研究： 参考

我认为 react-navigation 和 StatusBar 之间没有任何冲突，但我认为您应该使用组件而不是命令式 API。这很有可能是由于您的应用程序重新渲染，它只是切换回默认值，并声明了组件，您确保它不会发生。

目标：如果我再次打开应用程序，使状态栏不会变为蓝色。

这是我在我的应用程序上实现的：

  1. React Navigation 5（用于导航）
  2. 原生基地

状态栏：

 <StatusBar hidden={false} animated  barStyle="dark-content" backgroundColor="#FFFF" />

错误状态栏：

错误状态栏

目标状态栏：

目标状态栏

标签： reactjsreact-nativereact-navigation

解决方案

Code Works 可能仅适用于 android 设备，因为我们必须在 iOS 设备中管理 safeAreaView

查看以下代码示例以显示自定义状态栏颜色。

<View style={{ flex: 1 }} >
  <StatusBar animated backgroundColor="pink" barStyle="dark-content" />
  <View style={{ flex: 1, backgroundColor: "green" }} >

  </View>
</View>

您可能会看到状态栏颜色为粉红色，其中包含深色内容以及整个屏幕为绿色。

推荐阅读