logo标签列表

React Native状态栏在Android中与React Navigation不兼容。

androidreact-nativereact-navigationnative-baseandroid-statusbar
8

版本：

   "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>
        );
      }

这对我的登录和注册界面有效，但对我的导航视图屏幕无效。

登录和注册界面状态栏

enter image description here

导航界面状态栏

enter image description here

你使用 Expo 吗？ - aLIEz
@aLIEz 我没有使用 Expo。 - Sagar Chavada
你解决了这个问题吗？我也遇到了同样的问题。 - Nabeel K
1
@NabeelK 是的，问题出在 native-base 组件上。我改变了 contentComponent 视图，问题得到解决。 - Sagar Chavada
@SagarChavada，你能扩展一下你的解决方案吗？ - Phan Sinh
显示剩余5条评论
6个回答
6

现在已经修复了。

问题出在native-base组件上，所以我将contentComponent视图更改为这个。

<SafeAreaView style={{flex: 1}}> 
<View style={styles.container}> 
   <StatusBar backgroundColor={'red'} barStyle={'dark-content'} translucent={false} /> 
.... 
</SafeAreaView>
4

我的问题略有不同。

我从上一个页面导航过来时，将 StatusBar 隐藏设置为 true。

// previous screen that I navigated from
<StatusBar hidden animated />

因此，我必须在新屏幕上显式地将 StatusBar 的隐藏值更改为 false ，并将 animated 值更改为 true ：

// new screen needs hidden={false} to show up
<StatusBar hidden={false} animated />
1
如果您正在使用native-base Header并遇到此问题，您可以使用prop iosBarStyle，如下所示。
    <Header
      iosBarStyle="dark-content"
0

如果有人使用native-base Header 并且遇到此问题，可以使用以下方式使用prop androidStatusBarColor

<Header style={styles.header} androidStatusBarColor="#f8bb12">
0

如果有凹口，您可以这样做来排除它。

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>
  );
}

通过使用隐藏状态栏可以避免顶部凸起。

0

React Native 应用中的状态栏颜色

<View>
    <StatusBar backgroundColor="red"></StatusBar>

     <Text>
           hii
     <Text>

</View>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接