反応ナビゲーションでステータスバーの色を変更します

Question

私のアプリでは反応ナビゲーションのDrawerNavigatorを使用します。カスタマイズしなければ、Androidステータスバーは黒ではなく青で表示されます。

私は

StatusBar.setBackgroundColor('#000000'); 

を実行しようとしましたが、それはほんの数秒間動作し、それが戻って青になります。私が使用しているものは、ステータスバーの色を青色に設定しているようです。しかし、私はすべての依存関係を取り除き、反応ナビゲーションのみを維持しようとしましたが、反応ナビゲーションのドキュメントはそれについて何も言いません。

反応ナビゲーションでステータスバーの色を黒に設定するにはどうすればよいですか？

Answer 1

react-navigationとStatusBarの間に矛盾はありませんが、命令型APIではなく<StatusBar>コンポーネントを使用する必要があります。これはアプリの再レンダリングに起因する可能性が高く、コンポーネントが宣言された状態でデフォルトに戻すだけで、それが起こらないことを保証します。

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

あなたも、パスに応じて、それを変更するために、ルートごとに複数のものを持つことができます。ユーザーに応じて変更し、reduxを使用する場合は、接続されたコンポーネントで宣言し、backgroundColorを渡します。

Answer 2

DrawerNavigatorの設定を試しましたか？ Docによると、contentOptionsでは引き出しの内容をカスタマイズできます。

DrawerNavigatorを定義するファイルには、router.jsというファイルがあります。たぶん、このページがお手伝いします

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

：あなたのようにあなたのナビゲーターを作成する必要がありますDrawerNavigator

は現在、あなたの引き出しは確かにいくつかの点で再レンダリングされ、それが青になぜ色に戻ります。

Answer 3

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 

Answer 4

同様に、反応ナビゲーションとステータスバーの間には矛盾はありません。各画面はデバイスのステータスバーにプロパティを設定できる必要があり、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>;