react native safe area context
Release 5.0.0
Гибкий способ обработки безопасной области, также работает на Android и Web!
npm install react-native-safe-area-contextyarn add react-native-safe-area-contextЗатем вам нужно связать собственные части библиотеки для платформ, которые вы используете.
Платформа iOS:
$ npx pod-install
| версия | Реактивная версия |
|---|---|
| 5 | 0,74 |
| 4 | 0,64 |
Эта библиотека в настоящее время имеет экспериментальную поддержку для новой архитектуры реагирования. Обратите внимание, что будут поддерживать нарушение изменений, и будет поддерживать только последнюю версию React-Can.
Эта библиотека имеет 2 важных понятия, если вы знакомы с контекстом React, это очень похоже.
Компонент SafeareaProvider - это View о том, где находятся вставки, предоставленные потребителями. Это означает, что если это представление перекрывается с любыми элементами системы (строка состояния, выемки и т. Д.), Эти значения будут предоставлены потомкам потребителей. Обычно у вас будет один поставщик в верхней части вашего приложения.
Потребители - это компоненты и крючки, которые позволяют использовать значения вставки, предоставляемые ближайшим родительским поставщиком. Значения всегда относятся к поставщику, а не к этим компонентам.
SafeareaView - это предпочтительный способ потребления вставки. Это обычный View с вставками, применяемыми в виде дополнительной прокладки или маржи. Он предлагает лучшую производительность, применяя вставки и избегает мерцающих, которые могут произойти с другими потребителями на основе JS.
Использование Afeareainsets предлагает большую гибкость, но может привести к некоторым мерцанию макета в определенных случаях. Используйте это, если вам нужно больше контроля над тем, как применяются вставки.
Вы должны добавить SafeAreaProvider в корневое компонент вашего приложения. Возможно, вам придется добавить его в других местах, таких как корень модалей и маршрутов при использовании react-native-screens .
Обратите внимание, что поставщики не должны находиться внутри View , который анимирован с помощью Animated или внутри ScrollView , поскольку он может вызвать очень частые обновления.
import { SafeAreaProvider } from 'react-native-safe-area-context' ;
function App ( ) {
return < SafeAreaProvider > ... </ SafeAreaProvider > ;
} Принимает все представления. Имеет стиль по умолчанию {flex: 1} .
initialMetrics Необязательно, по умолчанию на null .
Может использоваться для обеспечения начального значения для кадры и вставки, это позволяет немедленно рендеринг. См. Оптимизация для получения дополнительной информации о том, как использовать эту опору.
SafeAreaView - это обычный компонент View с безопасной зоной, применяемыми в качестве прокладки или поля.
Стили заполнения или маржи добавляются во вставку, например style={{paddingTop: 10}} на SafeAreaView , в котором есть вставка 20, приведет к верхней прокладке 30.
import { SafeAreaView } from 'react-native-safe-area-context' ;
function SomeComponent ( ) {
return (
< SafeAreaView style = { { flex : 1 , backgroundColor : 'red' } } >
< View style = { { flex : 1 , backgroundColor : 'blue' } } />
</ SafeAreaView >
) ;
} Принимает все представления.
edges Необязательно, массив top , right , bottom и left . По умолчанию всем.
Устанавливает края для применения вставки безопасной зоны.
Например, если вы не хотите, чтобы вставки применялись к верхнему краю, потому что представление не касается верхней части экрана, который вы можете использовать:
< SafeAreaView edges = { [ 'right' , 'bottom' , 'left' ] } /> При желании он может быть установлен на объект { top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode } Где EdgeMode = 'off' | 'additive' | 'maximum' . Additive - это режим по умолчанию и такой же, как прохождение, а Edge в массиве: finalPadding = safeArea + padding . Maximum Mode будет использовать безопасную зону вставки или заполнение/маржу (в зависимости от mode ), если безопасная область меньше: finalPadding = max(safeArea, padding) . Например, если вам нужен плавучий элемент пользовательского интерфейса, который должен находиться на нижней безопасности края области на устройствах с безопасной площадью или 24px от нижней части экрана на устройствах без безопасной области или если безопасная область меньше 24px:
< SafeAreaView style = { { paddingBottom : 24 } } edges = { { bottom : 'maximum' } } /> mode Необязательно, padding (по умолчанию) или margin .
Нанесите безопасную зону на заполнение или маржу.
Это может быть полезно, например, для создания компонента сепаратора, осведомленной о безопасной области:
< SafeAreaView mode = "margin" style = { { height : 1 , backgroundColor : '#eee' } } />Возвращает вставки безопасной зоны ближайшего поставщика. Это позволяет манипулировать значениями вставки из JavaScript. Обратите внимание, что вставки не обновляются синхронно, поэтому это может вызвать небольшую задержку, например, при вращении экрана.
Объект с { top: number, right: number, bottom: number, left: number } .
import { useSafeAreaInsets } from 'react-native-safe-area-context' ;
function HookComponent ( ) {
const insets = useSafeAreaInsets ( ) ;
return < View style = { { paddingBottom : Math . max ( insets . bottom , 16 ) } } /> ;
} Возвращает раму ближайшего поставщика. Это можно использовать в качестве альтернативы модулю Dimensions .
Объект с { x: number, y: number, width: number, height: number }
SafeAreaInsetsContextРеагируйте контекст со значением вставки безопасной области.
Можно использовать с классовыми компонентами:
import { SafeAreaInsetsContext } from 'react-native-safe-area-context' ;
class ClassComponent extends React . Component {
render ( ) {
return (
< SafeAreaInsetsContext . Consumer >
{ ( insets ) => < View style = { { paddingTop : insets . top } } /> }
</ SafeAreaInsetsContext . Consumer >
) ;
}
}withSafeAreaInsets Компонент более высокого порядка, который обеспечивает безопасную зону вставки в качестве insets .
type Props = WithSafeAreaInsetsProps & {
someProp : number ;
} ;
class ClassComponent extends React . Component < Props > {
render ( ) {
return < View style = { { paddingTop : this . props . insets . top } } / >;
}
}
const ClassComponentWithInsets = withSafeAreaInsets ( ClassComponent ) ;
< ClassComponentWithInsets someProp = { 1 } / > ;SafeAreaFrameContextРеагировать контекст со значением кадры безопасной области.
initialWindowMetrics Вставки и кадр окна на начальном рендере. Это может быть использовано с initialMetrics от SafeAreaProvider . См. Оптимизация для получения дополнительной информации.
Объект с:
{
frame : { x : number , y : number , width : number , height : number } ,
insets : { top : number , left : number , right : number , bottom : number } ,
}Примечание. Это значение может быть нулевым или устаревшим, так как оно вычисляется при создании собственного модуля.
useSafeAreaInsets использует вместо этого. Вместо этого.
Вместо этого используйте SafeAreaInsetsContext.Consumer .
Вместо этого используйте SafeAreaInsetsContext .
Вместо этого используйте initialWindowMetrics .
Если вы выполняете рендеринг на стороне сервера в Интернете, вы можете использовать initialMetrics для ввода вставки и значения кадра на основе устройства, которое есть у пользователя, или просто пройти нулевые значения. Поскольку измерение вставки является асинхронным, он нарушит содержимое вашей страницы иначе.
Если вы можете, используйте SafeAreaView . Он реализован изначально, поэтому при вращении устройства нет задержки от асинхронного моста.
Чтобы ускорить начальный рендеринг, вы можете импортировать initialWindowMetrics из этого пакета и установить в качестве initialMetrics опоры для поставщика, как описано в веб -SSR. Вы не можете сделать это, если ваш провайдер сдает, или вы используете react-native-navigation .
import {
SafeAreaProvider ,
initialWindowMetrics ,
} from 'react-native-safe-area-context' ;
function App ( ) {
return (
< SafeAreaProvider initialMetrics = { initialWindowMetrics } >
...
</ SafeAreaProvider >
) ;
} Эта библиотека включает в себя встроенный макет для шутки. Он будет использовать следующие метрики по умолчанию:
{
frame : {
width : 320 ,
height : 640 ,
x : 0 ,
y : 0 ,
} ,
insets : {
left : 0 ,
right : 0 ,
bottom : 0 ,
top : 0 ,
} ,
}Чтобы использовать его, добавьте следующий код в файл настройки Jest:
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock' ;
jest . mock ( 'react-native-safe-area-context' , ( ) => mockSafeAreaContext ) ; Чтобы иметь больше контроля над тестовыми значениями, также возможно передать initialMetrics в SafeAreaProvider , чтобы предоставить фиктивные данные для кадров и вставки.
export function TestSafeAreaProvider ( { children } ) {
return (
< SafeAreaProvider
initialMetrics = { {
frame : { x : 0 , y : 0 , width : 0 , height : 0 } ,
insets : { top : 0 , left : 0 , right : 0 , bottom : 0 } ,
} }
>
{ children }
</ SafeAreaProvider >
) ;
} При попытке использовать эту макету, часто встречается ошибка:
SyntaxError : Cannot use import statement outside a module .Этот вопрос возникает из -за использования оператора импорта. Чтобы решить его, вам нужно разрешить Babel проанализировать файл.
По умолчанию Jest не анализирует файлы, расположенные в папке node_modules.
Тем не менее, вы можете изменить это поведение, как указано в Jest Documentation на настройке transformIgnorePatterns . Если вы используете предустановку, например, от React-Contive, вы должны обновить свою конфигурацию Jest, чтобы включить react-native-safe-area-context как показано ниже:
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-safe-area-context)/)' ,
] ;Эта корректировка гарантирует, что Babel правильно анализирует модули, избегая вышеупомянутой ошибки синтаксиса.
См. Руководство
