Со смартфонами, которые в настоящее время прикреплены к экранам с выемкой (вырезание экрана смартфона, как правило, на камеры, датчики и другие компоненты), 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! о /