Реагировать на собственный статус строки состояния IOS - PullRequest
Новая
       6

Реагировать на собственный статус строки состояния IOS

0 голосов
/ 24 января 2019

Поскольку применение backgroundColor реквизита к компоненту StatusBar не применяется в IOS. Мне нужно установить цвет фона SafeAreaView, чтобы получить желаемый эффект, он отлично работает, но на iPhone X он будет иметь тот же цвет в нижней части экрана. Как я могу решить эту проблему?

enter image description here

1 Ответ

0 голосов
/ 24 января 2019

React-Native не поддерживает изменение цвета фона StatusBar на платформе iOS, но на платформе Android это нормально (https://facebook.github.io/react-native/docs/statusbar#backgroundcolor). Я обошел вашу проблему. Вы можете безопасно ее использовать 

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </View>
        );
    }
}

export default App;

Для SafeAreaView: 

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";
import SafeAreaView from "react-native-safe-area-view";
//You can also use react-navigation package for SafeAreaView with forceInset.

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <SafeAreaView style={{flex:1}}
                forceInset={{top: 'never'}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </SafeAreaView>
        );
    }
}

export default App;
...