使用react-navigation更改狀態欄顏色

我在我的應用中使用了react-navigation中的DrawerNavigator。沒有任何定製，Android狀態欄是藍色的，而不是黑色。使用react-navigation更改狀態欄顏色

我試圖做

StatusBar.setBackgroundColor('#000000');

，但它僅適用於幾秒鐘，然後它會回藍。看來我正在使用的設置狀態欄顏色爲藍色。但是，我嘗試刪除所有依賴關係，只保留反應導航，並且它仍然發生，並且反應導航文檔沒有提到任何相關內容。

如何使用react-navigation將狀態欄顏色設置爲黑色？

來源

2017-06-02 Arnaud

我不認爲react-navigation和StatusBar之間有任何衝突，但我認爲您應該使用<StatusBar>組件，而不是命令式API。這很有可能是由於您的應用程序重新渲染而引起的，它只是切換回默認設置，並聲明組件，確保它不會發生。

<StatusBar backgroundColor='blue' barStyle='light-content' />

您甚至可以爲每個路徑設置多個路徑，根據路徑進行更改。如果您想要根據用戶更改並使用redux，請在連接的組件中聲明並通過backgroundColor。

來源

2017-06-04 17:26:31

我也試過，但它有沒有效果。但是我不確定我應該把這個放在哪裏。 – Arnaud

在您的頂級根組件或頂級「視圖」上。結帳[這個答案]（https://stackoverflow.com/a/39300715/2054072）也可以幫助，如果你想要它在兩個平臺上。 –

謝謝！（賞金可以明天頒發）。對於讀者來說：如果你使用NativeBase，這不起作用。請參閱此頁面以獲取解決方案：https：//github.com/GeekyAnts/NativeBase/issues/323 – Arnaud

您是否嘗試設置DrawerNavigator配置？ Doc表示contentOptions允許您自定義抽屜內容。

在您定義您的DrawerNavigator的文件中，可能是您的router.js文件。您應該創建導航爲：

const MyApp = DrawerNavigator({ 
    Home: { 
     screen: MyHomeScreen, 
     contentOptions: { 
      inactiveBackgroundColor: '#000000', 
     } 
    }, 
});

也許這個頁面將幫助您：DrawerNavigator

目前，你的抽屜肯定是在某個時候重新呈現，這就是爲什麼顏色恢復爲藍色。

來源

2017-06-02 10:34:07 ElFreddy

不幸的是，它不起作用。我認爲inactiveBackgroundColor不應該控制狀態欄的顏色。 – Arnaud

您是否聲明瞭添加DrawerNavigator的StackNavigator？因爲您可以在那裏使用NavigationOptions自定義HeaderStyle。首先，我想你想改變抽屜背景的顏色，但是你想要的是自定義屏幕頂部的標題，對吧？ – ElFreddy

抽屜的背景和標題都沒有。我想自定義狀態欄（http://www.gizmobolt.com/wp-content/uploads/2015/02/Sony-Android-Lollipop-5.0-Status-Bar.png） – Arnaud

import React, {Component} from 'react'; 
import {Text, TouchableOpacity, View, StatusBar} from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 
import Icon from 'react-native-vector-icons/MaterialIcons'; 
import styles from "../styles/Style"; 

class ProfileScreen extends Component { 

    static navigationOptions = ({navigation}) => { 
     return { 
      headerLeft: (
       <TouchableOpacity onPress={() => { 
        navigation.navigate('DrawerOpen'); 
       }}> 
        <Icon name="menu" size={30} color="#fff" style={styles.burgerIcon}/> 
       </TouchableOpacity> 
      ), 
      title: 'My Profile', 
      headerRight: (
       <Icon name={'edit'} size={30} color={'#fff'} style={styles.headerRightIcon}/> 
      ), 
      headerTintColor: "#fff", 
      headerStyle: { 
       backgroundColor: '#8BC83D', 
       height: 56, 
       elevation: null 
      } 
     }; 
    }; 

    render() { 
     return (
      <View style={styles.screenContainer}> 

       <StatusBar 
        backgroundColor="#7CB236" 
        barStyle="light-content" 
       /> 
       <Text style={styles.welcome}> 
        I amsecond reder 
       </Text> 
      </View> 
     ); 
    } 
} 
const ProfileScreenList = StackNavigator(
    { 
    ProfileScreenIndex: {screen: ProfileScreen}, 
} 
); 
export default ProfileScreenList

來源

2017-06-05 17:28:38 rsthdn

像APERCU說反應的導航和狀態欄之間沒有衝突。每個屏幕都應該能夠在設備的狀態欄上設置屬性，並且createNavigationContainer中定義的容器應該獲得狀態更改的選項，並且可以原生應用它們。爲整個應用程序嘗試此狀態欄。

const AppContent = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Secondary: { screen: SecondaryScreen }, 
}); 

const App =() => 
    <View style={{flex: 1}}> 
    <StatusBar backgroundColor="blue" barStyle="light-content"/> 
    // style the bar. barStyle is text and icon color od status bar. 
    <AppContent /> 
</View>;

來源

2017-09-05 15:39:58

使用react-navigation更改狀態欄顏色

回答

相關問題