SafeAreaView - это API-интерфейс, поддерживающий реакцию, который помогает решить проблемы несовместимости дизайна iPhone X. Вот некоторые проблемы:
- Apple iPhone X (размеры 1125 * 2436 пикселей) имеет вырез в верхней части экрана с кластером датчиков и индикатором главного экрана на нижняя часть экрана
- Из-за этих новых конструктивных особенностей приложение, поддерживающее реакцию, имеет несовместимое выравнивание экрана.
Поскольку react-native предоставил решение в версии 0.50, все, кто начал использовать это из react-native, super, мы исправили. Бинго !!
Когда response-navigation начал поддерживать исправление дизайна iPhone X со своей стороны, они удалили forceInset из компонента safeAreaView, чтобы избежать ненужного поведения. Если вы все еще используете forceInset в своем репо, тогда это снова создаст проблему с дизайном, облажался !! , чтобы решить эту проблему, мы должны использовать элемент пользовательского интерфейса SafeAreaView из плагина response-navigation.
Здесь мы собираемся обсудить, каковы решения и какие методы лучше всего решить проблему на основе версий пакета вашего проекта.
Случай 1:
Если у вас установлена последняя версия react-navigation, вам не нужны другие сторонние плагины, такие как (react-native-safe-area-view), чтобы сделать ваше приложение совместимым с iPhone X, хотя вы можете решить эта проблема дизайна заключается в использовании самой реакции-навигации.
Реализация:
- import {SafeAreaView} from 'react-navigation'; .... <SafeAreaView> <View> <Text>SafeAreaView - Implementation</Text> </View> </SafeAreaView> ....
- Убедитесь, что вы передали headerStyle в navigationOptions, как показано в примере маршрутизатора ниже:
const sampleRouter = createSwitchNavigator( { homeScreen: { title: 'Home Screen', // defining the screen title as headerTitle headerLeft: <View></View>, headerRight: <View></View> } }, navigationOptions:{ headerStyle:{ backgroundColor: '#212121', // this will handle the cutOff at the top the screen }, headerTitleStyle:{ fontSize: 14, fontWeight: '800', textAlign: 'center', flex: 1, // to make a header centered to the screen } } )
- Если вы не укажете свойство headerStyle для navigationOptions, то заголовок вашего приложения будет выглядеть несовместимым из-за зазора в верхней части экрана.
- В этом решении нет необходимости использовать свойство forceInset для компонента safeareaview, если и до тех пор, пока вам не понадобится больше контроля, потому что он уже обрабатывается плагином навигации.
Демо-репозиторий: https://github.com/MaheshNandam/SafeAreaLayout, здесь я реализовал SafeAreaView из response-navigation, и вместе с ним вы можете увидеть настроенный header реализация компонента в navigationOptions.
Случай 2:
Если у вас нет последней версии react-navigation, все в порядке, но в вашем проекте должна быть min 0.50 response-native версия. иначе переходите к случаю 3.
- import {SafeAreaView, Text, View} from 'react-native'; .... <SafeAreaView forceInset={{ top: 'always' }} style={{ backgroundColor: '#212121', flex: 1}}> <View> <Text>SafeAreaView - Implementation</Text> </View> </SafeAreaView> ....
Случай 3:
Если у вас нет последних версий react-native и react-navigation, не беспокойтесь, здесь вы можете использовать 'response-native-safe-area- просмотреть 'сторонний плагин, как показано ниже,
import SafeAreaView from 'react-native-safe-area-view'; .... <SafeAreaView forceInset={{ top: 'always' }} style={{ backgroundColor: '#212121', flex: 1}}> <View> <Text>SafeAreaView - Implementation</Text> </View> </SafeAreaView> ....
Если вы хотите большего контроля, используйте «forceInset» -
- ForceInset = {{object: 'Value'}}, здесь ключи «объекта» - «верхний, нижний, левый, правый, вертикальный, горизонтальный», а ключи значения - «всегда, никогда, целые».
Подведение итогов:
- Если вы не установили последнюю версию react-navigation, сделайте это и используйте SafeAreaView из самой react-navigation.
Если вам понравилась эта статья, пожалуйста, аплодируйте и поделитесь ею. Спасибо за уделенное время.