REAGERA NATIVE -MODULEN FÖR ATT HANTERA SÄKRA OMRÅDESINLÄGG FÖR IOS 11 ELLER SENARE

Reagera Native -modulen för att hantera säkra områdesinlägg för iOS 11 eller senare

reagera-infödda-säkert-område

React Native -modul för att hantera säkra områdesinsatser för iOS 11 eller senare.

rnsf

Installation

1. Installera bibliotek från | _+_ |

npm

2. Länka inbyggd kod

Du kan länka inbyggd kod på det sätt du föredrar:

CocoaPods

Lägg till rad i projektmålsektionen i din Podfile:

npm install --save react-native-safe-area

Om du fick fel | _+_ |, lägg till rader nedan i din Podfile och installera om pods.

target 'YourProjectTarget' do + pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area' end

reagerande länk

Kör kommandot nedan:

jest-haste-map: Haste module naming collision: Duplicate module name: react-native

Användande

Arbeta med vyer

Använd | _+_ | att tillämpa säkra områdesinlägg på vyer automatiskt.

target 'YourProjectTarget' do + rn_path = '../node_modules/react-native' + pod 'yoga', path: '#{rn_path}/ReactCommon/yoga/yoga.podspec' + pod 'React', path: rn_path pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area' end + post_install do |installer| + installer.pods_project.targets.each do |target| + if target.name == 'React' + target.remove_from_project + end + end + end

withSafeArea (komponent [, applyTo] [, riktning])

En komponent av högre ordning som applicerar säkra områden automatiskt på den inslagna komponenten.

react-native link react-native-safe-area : Komponent - Inslagen komponent.
withSafeArea : sträng - (Valfritt) Ange egenskap för att tillämpa säkra inlägg.
- | _+_ | - | _+_ |. (Standard)
- import { withSafeArea } from 'react-native-safe-area' - component.
- | _+_ | - | _+_ |, | _+_ |, | _+_ | och | _+_ |.
- | _+_ | - | _+_ | och | _+_ | för rullningsvyer.
applyTo : sträng - (Valfritt) Ange riktning för att applicera säkra områden.
- | _+_ | - Applicera på toppen.
- | _+_ | - Applicera på botten.
- | _+_ | - Applicera till vänster.
- | _+_ | - Applicera till höger.
- margin - style.margin + padding.
- style.padding - absolutePosition + style.top.
- style.bottom - style.left + style.right.
- contentInset - contentInset + contentOffset.
- direction - top + bottom.
- left - right + topAndLeft.
- top - left + topAndRight.
- top - right + bottomAndLeft.
- bottom - left + bottomAndRight.
- bottom - right + horizontal.
- | _+_ | - | _+_ | + | _+ _ |. (Standard)

Enkelt exempel

left

ScrollView -exempel

right

Du kan också applicera säkra områdesinsatser på FlatList och SectionList.

Förbättrad komponents API: er

få | _+_ | : ref

Returnerar inpackad komponents ref.

få | _+_ | : SafeAreaInsets

Returnerar aktuell insats för säkert område.

Hantera säkert område manuellt

horizontalAndTop

Om du vill använda | _+_ | typ, kan du importera den enligt nedan:

horizontal

Hämta säkra områdesinsatser för rotvy

top

Hantera säkra insatser ändrade händelse

horizontalAndBottom

Exempel

Ett enkelt exempelprojekt finns här.

Ladda ner detaljer:

Författare: miyabi

GitHub: https://github.com/miyabi/react-native-safe-area

hur man köper xinfin

#reagera #reagera #mobilappar

Reagera Native -modulen för att hantera säkra områdesinlägg för iOS 11 eller senare