web-dev-qa-db-fra.com

Changer la couleur de la barre d'état avec react-navigation

J'utilise une DrawerNavigator de react-navigation dans mon application. Sans aucune personnalisation, la barre d'état Android est bleue et non noire.

J'ai essayé de faire

StatusBar.setBackgroundColor('#000000');

mais cela ne fonctionne que pendant quelques secondes, puis redevient bleu. Il semble que quelque chose que j'utilise utilise pour définir la couleur de la barre d'état en bleu. Cependant, j'ai essayé de supprimer toutes les dépendances et de ne garder que la navigation réactive, et cela continue à se produire.

Comment puis-je définir la couleur de la barre d'état en noir avec react-navigation?

react-nativereact-navigationandroid-statusbar
6
Arnaud

Je ne pense pas qu'il y ait de conflit entre react-navigation et StatusBar, mais je pense que vous devriez utiliser le composant <StatusBar> plutôt que l'API impérative. Il y a de fortes chances que cela soit dû à un re-rendu de votre application. Il suffit de revenir à la valeur par défaut. Avec un composant, vous vous assurez que cela ne se produira pas.

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

Vous pouvez même en avoir plusieurs par itinéraire, pour le changer en fonction du chemin. Si vous souhaitez le modifier en fonction de l'utilisateur et en utilisant redux, déclarez-le dans un composant connecté et transmettez le backgroundColor.

5
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

Comme Aperçu dit pas de conflit entre react-navigation et le StatusBar. Chaque écran doit pouvoir définir les propriétés de la barre d'état du périphérique et le conteneur défini dans createNavigationContainer doit obtenir les options de changement d'état et les appliquer de manière native. essayez ceci pour StatusBar pour toute l'application. 

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

Vous voudrez peut-être utiliser ceci, plugin navigationbar-react-native ! 

1, installer le plugin 

npm i navigationbar-react-native --save

2, en utilisant 

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

Avez-vous essayé de configurer votre configuration DrawerNavigator? Doc dit que contentOptions vous permet de personnaliser le contenu du tiroir.

Dans le fichier où vous définissez votre DrawerNavigator, peut-être votre fichier router.js. Vous devez créer votre navigateur en tant que:

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

Peut-être que cette page vous aidera: DrawerNavigator

Actuellement, votre tiroir est certainement refait à un moment donné, c'est pourquoi la couleur redevient bleue.

0
ElFreddy