React Native 中的状态栏颜色
Posted
技术标签:
【中文标题】React Native 中的状态栏颜色【英文标题】:StatusBar color in React Native 【发布时间】:2017-10-10 14:08:09 【问题描述】:如何在不编辑 android 特定文件的情况下从 react-native
更改 StatusBar
组件的背景颜色?
文档says,我可以使用backgroundColor
属性。但它失败了。 barStyle
属性,setBarStyle
&& setBackgroundColor
静态方法也不能正常工作。
只有 hidden
属性有效。
我正在使用create-react-native-app
,使用Expo 构建。
【问题讨论】:
【参考方案1】:在 Expo App 中,您需要在项目根目录中编辑app.json
,如下所示:
"expo":
"sdkVersion": "16.0.0",
"androidStatusBar":
"barStyle": "dark-content",
"backgroundColor": "#0A48A5"
参见世博会文档: https://docs.expo.io/versions/v16.0.0/guides/configuration.html
【讨论】:
它有帮助,但只能与<StatusBar barStyle="light-content" backgroundColor="#1976D2"/>
结合使用。谢谢!
@Tehreem 你重启了 expo 开发了吗?我在上面添加了这个设置,它只有在我在 VS Code 中再次“启动”我的应用程序后才会生效【参考方案2】:
你可以使用
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
您可以查看文档here。
【讨论】:
【参考方案3】:在 ..android/app/src/main/res/values 中添加 color.xml 并粘贴以下代码
<?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】:使用这个
import StatusBar from 'react-native';
const bar = ()=>
return( <StatusBar backgroundColor="insert your color here"/> );
;
【讨论】:
以上是关于React Native 中的状态栏颜色的主要内容,如果未能解决你的问题,请参考以下文章
React-native-splash-screen 状态栏颜色(不兼容的类型)
如何在 React Native 中设置 iOS 状态栏背景颜色?
在 iOS 中 React Native 更改状态栏文本颜色