反應本機狀態欄不適用於android中的反應導航

Question

版本：

   "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"

當我添加反應導航時，我無法更改狀態欄顏色，我的狀態欄變為藍色。

這是我的 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>
        );
      }

這適用於我的登錄和登錄屏幕，但不適用於我的導航視圖屏幕。

登錄和登錄屏幕狀態欄

導航屏幕狀態欄

Answer 1

它現在修復了。

問題，是原生組件，所以我將 contentComponent 視圖更改為此。

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

Answer 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 />

Answer 3

對於任何使用本機基礎 Header 並遇到此問題的人，您可以使用道具 iosBarStyle，如下所示

    <Header
      iosBarStyle="dark-content"

Answer 4

對於使用本機基礎Header並遇到此問題的任何人，您可以使用道具androidStatusBarColor ，如下所示

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

Answer 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 可以排除一流的。

Answer 6

反應本機應用程序中的狀態欄顏色

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

     <Text>
           hii
     <Text>

</View>

反應本機狀態欄不適用於android中的反應導航

問題描述

6 個解決方案

解決方案1
5 已采納 2018-12-24 04:34:07

解決方案2
3 2020-11-19 18:37:51

解決方案3
1 2021-07-19 04:33:44

解決方案4
0 2021-02-08 22:09:43

解決方案5
0 2021-11-17 06:38:06

解決方案6
0 2022-05-14 18:26:43

反應本機狀態欄不適用於android中的反應導航

問題描述

6 個解決方案

解決方案1 5 已采納 2018-12-24 04:34:07

解決方案2 3 2020-11-19 18:37:51

解決方案3 1 2021-07-19 04:33:44

解決方案4 0 2021-02-08 22:09:43

解決方案5 0 2021-11-17 06:38:06

解決方案6 0 2022-05-14 18:26:43

解決方案1
5 已采納 2018-12-24 04:34:07

解決方案2
3 2020-11-19 18:37:51

解決方案3
1 2021-07-19 04:33:44

解決方案4
0 2021-02-08 22:09:43

解決方案5
0 2021-11-17 06:38:06

解決方案6
0 2022-05-14 18:26:43