Как использовать SafeAreaView в React-Navigation и избежать места на iPhone X?

Некоторое время назад React Native представил компонент SafeAreaView, и теперь он доступен как часть пакета react-navigation, который отлично работает и решает проблему на iPhone X, оставляя место для индикатора Home (нижняя панель).

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

Вот несколько скриншотов:

SafeAreaView добавляет белый фон

SafeAreaView добавляет белый фон и небольшое затенение

Вот код, который я использую:

<Provider store={store}>
    <SafeAreaView style={{flex: 1}} forceInset={{'top': 'never'}}>
        <View style={{flex: 1}}>
            <Navigator/>
            <NotificationsContainer/>
        </View>
    </SafeAreaView>
</Provider>

Как я могу изменить это поведение и пользовательский интерфейс?

Спасибо :)


react-native expo react-navigation
person nirpeled    schedule 07.04.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете добавить к нему backgroundColor, чтобы изменить его в соответствии с цветом фона экрана.

<SafeAreaView style={{flex: 1, backgroundColor: //Your Primary Color}} forceInset={{'top': 'never'}}>
        <View style={{flex: 1}}>
            <Navigator/>
            <NotificationsContainer/>
        </View>
    </SafeAreaView>

Тень появляется из-за карты StackNavigator, которую вы могли использовать. Чтобы удалить его, попробуйте удалить elevation, shadowProps для Android и ios соответственно как

const StackDemo = StackNavigator({
 // ...routes 
, {
  // ...props
  cardStyle: { shadowColor: 'transparent' },
});
person Pritish Vaidya    schedule 07.04.2018
comment
Это был отличный совет, и он действительно заполнил выемку iPhone X. Тем не менее, я все еще, кажется, получаю эту границу в нижней части области выреза и, похоже, не могу разрешить ее с помощью собственных стилей таблицы стилей реагирования. Любой совет? Скриншот: imgur.com/a/JUYjnYJ и источник App.js: gist.github.com/tetreault/e44f12c462eda5956bf8943d2bd16ede . Изменить: я хотел указать, что использую View вместо SafeAreaView, но результат в любом случае одинаков. - person Stephen Tetreault; 17.10.2018