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.

Если вам понравилась эта статья, пожалуйста, аплодируйте и поделитесь ею. Спасибо за уделенное время.