web-dev-qa-db-ja.com

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

アプリでは、react-navigationのDrawerNavigatorを使用しています。カスタマイズを行わないと、Androidステータスバーは黒でなく青になります。

やってみた

StatusBar.setBackgroundColor('#000000');

しかし、それは数秒間しか機能せず、その後青に戻ります。私が使用しているものはステータスバーの色を青に設定しているようです。しかし、私はすべての依存関係を削除し、反応ナビゲーションだけを維持しようとしましたが、それはまだ起こり、反応ナビゲーションのドキュメントはそれについて何も述べていません。

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

react-nativereact-navigationandroid-statusbar
7
Arnaud

react-navigationとStatusBarの間に競合はないと思いますが、命令型APIではなく<StatusBar>コンポーネントを使用する必要があると思います。これはアプリの再レンダリングが原因である可能性が高く、コンポーネント宣言を使用してデフォルトに戻すだけで、発生しないことを確認できます。

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

経路ごとに複数のものを持ち、パスに応じて変更することもできます。ユーザーに応じてreduxを使用して変更する場合は、接続コンポーネントで宣言し、backgroundColorを渡します。

11
Balthazar
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
3
rsthdn

Aperçuが言ったように、react-navigationとStatusBarの間に競合はありません。各画面は、デバイスのステータスバーでプロパティを設定できる必要があり、createNavigationContainerで定義されたコンテナーは、状態変更のオプションを取得し、ネイティブに適用する必要があります。アプリ全体のStatusBarでこれを試してください。

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>;
2
Anjal Saneen

プラグイン navigationbar-react-native ！

1、プラグインをインストール

npm i navigationbar-react-native --save

2、使用

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,Image,
  View, 
  TouchableOpacity,
} from 'react-native';
import NavigationBar from 'navigationbar-react-native';
 
const ComponentLeft = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-start'}} >
       <TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}>
        <Image 
          source={require('./img/ic_back.png')}
          style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }}
        />
        <Text style={{ color: 'white', }}>Back Home</Text>
      </TouchableOpacity>
    </View>
  );
};
 
const ComponentCenter = () => {
  return(
    <View style={{ flex: 1, }}>
       <Image
        source={require('./img/ic_logo.png')}
        style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }}
      />
    </View>
  );
};
 
const ComponentRight = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-end', }}>
      <TouchableOpacity>
        <Text style={{ color: 'white', }}> Right </Text>
      </TouchableOpacity>
    </View>
  );
};
 
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar 
          componentLeft     = { () =>  {<ComponentLeft />   }
          componentCenter   = { () =>  {<ComponentCenter /> }
          componentRight    = { () =>  {<ComponentRight />  }
          navigationBarStyle= {{ backgroundColor: ''#215e79'' }}
          statusBarStyle    = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
        />
      </View>
    );
  }
}
0
Jundat95

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

DrawerNavigatorを定義するファイルで、おそらくrouter.jsファイル。次のようにナビゲータを作成する必要があります。

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

たぶん、このページはあなたを助けるでしょう： DrawerNavigator

現在、Drawerはある時点で確かに再レンダリングされているため、色が青に戻ります。

0
ElFreddy