Со смартфонами, которые в настоящее время прикреплены к экранам с выемкой (вырезание экрана смартфона, как правило, на камеры, датчики и другие компоненты), React Native также пришлось адаптироваться к этому изменению. С этим был создан компонент SafeAreaView.

Но иногда в компоненте SafeAreaView нам нужно использовать другой цвет сверху, а другой - снизу, поэтому сейчас я научу, как вы можете установить разные цвета сверху, а другой - снизу в компоненте SafeAreaView.

Приступим к работе с кодом!

До начала…

Чтобы установить разные цвета сверху и снизу в компоненте SafeAreaView, вашему проекту нужна версия React (не React Native, React), равная или выше React v16.2.0.
Потому что мы будем использовать компонент Fragment React, и этот компонент получает поддержку для возврата нескольких дочерних элементов из метода рендеринга компонента в React v16.2.0.

Теперь мы действительно начнем с кода!

1- Создать приложение React Native

Создание нового приложения React Native из командной строки:

react-native init SafeAreaViewApp

2- Добавление нового импорта в основной файл .js

Откройте файл App.js и импортируйте, например:

...
import React, { Component, Fragment } from 'react';
import { Platform, StyleSheet, Text, View, SafeAreaView } from 'react-native';
...

3- Реализация на основном file.js

Открыв файл App.js, реализуйте render () следующим образом:

<Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</SafeAreaView>
</Fragment>

7- Тестирование выполненных реализаций

Откройте симулятор (используя iPhone X или Xs, Xr, Xs Max ..) и в корне проекта выполните эту команду:

react-native run-ios

Теперь вы можете видеть разные цвета сверху и снизу компонента SafeAreaView:

8- Еще одна хитрость

Иногда, наверху, нам нужно использовать темный цвет в строке состояния, и при этом мы не можем видеть статус (время, сигнал Wi-Fi, аккумулятор и т. Д.), Поэтому нам нужно изменить цвет состояния на светлый цвет.

9- Позвольте изменить что-нибудь в коде

Добавьте новый импорт StatusBar при импорте React Native.


...
import { Platform, StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native';
...

Теперь добавьте StatusBar в render ():

<Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
<StatusBar barStyle="light-content" />
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</SafeAreaView>
</Fragment>

Теперь статусы стали более светлыми.

Если вы хотите вернуться к темному цвету, просто измените barStyle = ”light-content” на barStyle = ”dark-content. ” в render ().

Итак, это все!
Надеюсь, вам понравилось. Спасибо за ваше время. CYA! о /