logo标签列表

有没有一种方法可以使用React Native更改Android状态栏的颜色？

androidreact-nativestatusbar
50

我刚开始学习React Native开发Android应用，并尝试找到一种改变Android状态栏颜色的方法...

像这样的效果？

图片描述

14个回答
53

你可以使用 React Native 状态栏（详细说明请参见此处）。你需要做的就是用一个视图包装导航器并在其上方添加一个 StatusBar 组件。不要忘记从 'react-native' 包中导入 StatusBar。

<View>
  <StatusBar
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Navigator
    initialRoute={{statusBarHidden: true}}
    renderScene={(route, navigator) =>
      <View>
        <StatusBar hidden={route.statusBarHidden} />
         ...
      </View>
    }
  />
</View>

我注意到的一件事是，你应该用flex:1样式来设置父视图，如果没有它，你将只会看到一个白色的空白屏幕。尽管这在React Native文档中没有提到。

1
这个方法可行，而在 Android 项目中编辑 styles.xml 是行不通的。谢谢。 - Qing
导航器现在已经过时了，因此正在寻找更好的解决方案。 - Vivek Maru
4
状态栏是一个组件，您可以与任何喜欢的导航器一起使用它。这只是一个例子。 - eden
有关使用flex:1对顶部视图进行样式设置的实用技巧。 - dakini
25
您可以使用React Native内置的StatusBar函数。
import {StatusBar} from 'react-native';

render() {
  return <View>
     <StatusBar
        backgroundColor="#264d9b"
        barStyle="light-content"
     />
     ... //Your code
   </View>
}

reference: https://facebook.github.io/react-native/docs/statusbar

24

可以的：

import {StatusBar} from 'react-native';

componentDidMount() {
  StatusBar.setBarStyle( 'light-content',true)
  StatusBar.setBackgroundColor("#0996AE")
}
6
1
哇，我完全忘记了React Native下面有一个实际的Java项目。虽然我猜我得使用values-21文件夹，因为colorPrimary/colorPrimaryDark只适用于Lollipop及以上版本。或者引入AppCompat... - russjr08
6
感谢这个模块！我会将其标记为答案，因为它似乎是“React”的正确做法。 - russjr08
2
导航栏着色怎么样？ - user1532043
我认为安卓还没有发布相关的 API。 - Nishanth Shankar
但是怎么样才能给“Action Bar”、“App Bar”或“Navigation Bar”上色呢？ - prasang7
6
请在您的头部组件中添加此代码。
androidStatusBarColor="#34495e"
6

将 color.xml 添加到 ..android/app/src/main/res/values 目录下，然后粘贴以下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   a darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars -->
    <color name="colorPrimaryDark">#A52D53</color>

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#FF4081</color>
</resources>

请将以下代码复制并粘贴到..android/app/src/main/res/values/styles.xml文件中：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>    
</style>
4
如果您正在使用Expo开发React Native，那么这里提供了设置Android状态栏颜色的解决方案。
首先，在您的app.json文件中添加以下代码：
{
  "expo": {
    "sdkVersion": "Your given Version",
    "androidStatusBar": {
       "backgroundColor": "#4e2ba1" (Your desirable android Status Bar Color before the app loads)
    }
   }    
}

然后进入您的主组件或App.js，在'react-native'中导入 'StatusBar'。然后在返回中添加以下代码：

return(
   <View style={{flex: 1}}>  (Do not forget to style flex as 1)
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
      <Your Code>
   </View>
);

在这里，我们将状态栏颜色设置为黑色但透明度为0.2。对于堆栈导航器，您的状态栏颜色将与headerStyle背景颜色相同，但稍微暗一些。对于标准的Android应用程序，就是这样设置状态栏颜色的。另外，将其设为半透明，这样您的应用程序可以在状态栏下绘制，看起来更好。希望这对您完美运作。
3

目前还没有公开的 API。这只能在 Android 5.0 及以上版本中使用。 正在开发桥接模块以实现相同的功能。稍后会通知您。

3

只需将以下代码添加到您的 class 组件中的 App.js 文件中。

    componentDidMount(){
        StatusBar.setBarStyle( 'light-content',true)
        StatusBar.setBackgroundColor("Your color Hex-code here")
    }

并将以下内容添加到您的导入语句中。

    import {StatusBar} from 'react-native';
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接