反应本机状态栏不适用于android中的反应导航
Posted
技术标签:
【中文标题】反应本机状态栏不适用于android中的反应导航【英文标题】：React native statusbar not working with react-navigation in android 【发布时间】：2018-10-03 10:04:16 【问题描述】：版本：
"native-base": "^2.4.2",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-global-font": "^1.0.1",
"react-native-router-flux": "^4.0.0-beta.28",
"react-navigation": "^1.5.11"
当我添加 react-navigation 时，我无法更改状态栏颜色，我的状态栏变成蓝色。
这是我的 Navigationview.js 代码
render()
return (
<Root style=styles.container>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
<MainView />
</Root>
);
const drawerHeader = (props) => (
<Container style=styles.container>
<Header style=styles.header>
<Body style=styles.body>
<Icon name="person" style= fontSize: 40, color: '#CCCCCC' />
</Body>
</Header>
<Content>
<SafeAreaView forceInset= top: 'always', horizontal: 'never' >
<DrawerItems ...props />
<Button title="Logout" onPress=() => Actions.reset('login') />
</SafeAreaView>
</Content>
</Container>
);
const MainView = DrawerNavigator(
DASHBOARD:
screen: Dashboard,
,
LOGOUT:
screen: LoginForm,
,
initialRouteName: 'DASHBOARD',
contentComponent: drawerHeader,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToogleRoute: 'DrawerToogle'
);
i even set statusbar color in Dashboard screen, still not change.
Dashboard.js
<Container>
<Header androidStatusBarColor="#FFF" style=backgroundColor:'#000'>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
<Body>
<Title style=color:'#FFF'>My App</Title>
</Body>
</Header>
<Content>
//content of your app goes here
</Content>
</Container>
I m also using native-base, so i add this code in my App.js file
render()
return (
<Root style=styles.container>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
this.spinerRender()
</Root>
);
这适用于我的登录和登录屏幕，但不适用于我的导航视图屏幕。
登录和登录屏幕状态栏
导航屏幕状态栏
【问题讨论】：
你使用世博会吗？ @aLIEz no i m not using expo. 尝试将其包装在视图中并在根容器中添加一些高度，如提到的here ParentWrapper 是从哪里派生出来的？ @NabeelK 是的，问题是原生组件。我更改了 contentComponent 视图。问题解决了。 【参考方案1】：现在修复了。
问题，是本机基础组件，所以我将 contentComponent 视图更改为此。
<SafeAreaView style=flex: 1>
<View style=styles.container>
<StatusBar backgroundColor='red' barStyle='dark-content' translucent=false />
....
</SafeAreaView>
【讨论】：
【参考方案2】：我的问题略有不同。
我导航的上一个屏幕已将 StatusBar hidden 设置为 true。
// previous screen that I navigated from
<StatusBar hidden animated />
所以我必须在新屏幕上将 StatusBar hidden 显式更改为 false 和 animated 到 true：
// new screen needs hidden=false to show up
<StatusBar hidden=false animated />
【讨论】：
【参考方案3】：对于任何使用 native-base Header 并遇到此问题的人，您可以使用 prop iosBarStyle，如下所示
<Header
iosBarStyle="dark-content"
【讨论】：
【参考方案4】：对于任何使用 native-base Header 并遇到此问题的人，您可以使用 prop androidStatusBarColor，如下所示
<Header style=styles.header androidStatusBarColor="#f8bb12">
【讨论】：
【参考方案5】：如果存在缺口，您可以这样做以排除缺口。
import React from "react";
import Text, SafeAreaView, StatusBar from "react-native";
export default function App()
return (
<React.Fragment>
<StatusBar hidden />
<SafeAreaView>
<Text>Your Code</Text>
</SafeAreaView>
</React.Fragment>
);
通过使用带隐藏的StatusBar可以排除***。
【讨论】：
以上是关于反应本机状态栏不适用于android中的反应导航的主要内容，如果未能解决你的问题，请参考以下文章