Изменение цвета строки состояния с помощью react-навигации

Я использую DrawerNavigator из react-navigation в моем приложении. Без какой-либо настройки строка состояния Android является синей, а не черной.

Я пытался сделать

StatusBar.setBackgroundColor('#000000');

но он работает всего несколько секунд,а затем возвращается к синему. Кажется, что то, что я использую, устанавливает цвет строки состояния в синий. Тем не менее, я попытался удалить все зависимости и сохранить только react-navigation, и это все еще происходит, и документы react-navigation ничего не говорят что.

Как установить цвет строки состояния в черный с помощью react-navigation ?

6
android-statusbar react-native react-navigation

4 ответов

Я не думаю, что существует какой-либо конфликт между react-navigation и StatusBar, но я думаю, что вы должны использовать <StatusBar> компонент, а не императивный API. Существует высокая вероятность того, что это связано с повторным рендерингом вашего приложения, и он просто переключится на значение по умолчанию, с объявлением компонента, вы гарантируете, что этого не произойдет.

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

вы даже можете иметь несколько из них на пути, чтобы изменить его в зависимости от пути. Если вы хотите изменить его в зависимости от пользователя и с помощью redux, объявить это в подключенном компоненте и передайте backgroundColor.

4
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

Как 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>;
1

вы пытались установить конфигурацию DrawerNavigator ? Док говорит, что contentOptions позволяет настроить содержимое ящика.

в файле, где вы определите свой DrawerNavigator, может быть, ваш . Вы должны создать свой навигатор как:

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

возможно, эта страница поможет вам: DrawerNavigator

В настоящее время ваш ящик, безусловно, перерисовывается в какой-то момент, поэтому цвет возвращается к синему.

0