webentwicklung-frage-antwort-db.com.de

Ändern Sie die Farbe der Statusleiste mit der Reaktynavigation

Ich verwende in meiner App eine DrawerNavigator aus der reag-navigation. Ohne Anpassungen ist die Android-Statusleiste blau und nicht schwarz.

Ich habe versucht zu tun

StatusBar.setBackgroundColor('#000000');

aber es funktioniert nur für ein paar Sekunden und dann geht es wieder blau. Es scheint, dass etwas, das ich verwende, die Statusleiste auf Blau gesetzt hat. Ich habe jedoch versucht, alle Abhängigkeiten zu entfernen und nur die response-navigation aufzubewahren, und es passiert immer noch, und die docs der response-navigation sagen dazu nichts aus.

Wie kann ich die Farbe der Statusleiste bei der reakt-Navigation auf schwarz setzen?

6
Arnaud

Ich glaube nicht, dass es einen Konflikt zwischen react-navigation und der StatusBar gibt, aber ich denke, Sie sollten die <StatusBar>-Komponente anstelle der imperativen API verwenden. Es besteht eine hohe Chance, dass die App erneut gerendert wird. Sie werden einfach auf die Standardeinstellung zurückgesetzt. Mit der Deklaration einer Komponente stellen Sie sicher, dass dies nicht der Fall ist.

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

Sie können sogar mehrere Routen pro Route haben, um sie je nach Pfad zu ändern. Wenn Sie es je nach Benutzer und mit redux ändern möchten, deklarieren Sie es in einer verbundenen Komponente und übergeben Sie die 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

Wie Aperçu gesagt hat, gibt es keinen Konflikt zwischen der reag-navigation und der Statusleiste. Jeder Bildschirm sollte Eigenschaften in der Statusleiste des Geräts festlegen können, und der in createNavigationContainer definierte Container sollte die Optionen für die Statusänderung abrufen und sie nativ anwenden. Versuchen Sie dies für StatusBar für die gesamte App. 

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

Möglicherweise möchten Sie dieses Plugin navigationbar-reag-native verwenden! 

1, Plugin installieren 

npm i navigationbar-react-native --save

2, Verwenden von 

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

Haben Sie versucht, Ihre DrawerNavigator-Konfiguration festzulegen? Doc sagt, dass Sie mit contentOptions den Inhalt der Schublade anpassen können.

In der Datei, in der Sie Ihre DrawerNavigator definieren, möglicherweise Ihre router.js-Datei. Sie sollten Ihren Navigator erstellen als:

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

Vielleicht hilft Ihnen diese Seite: DrawerNavigator

Derzeit wird Ihre Schublade sicherlich irgendwann erneut gerendert, weshalb die Farbe wieder blau wird.

0
ElFreddy