Natives React-Modul zur nativen Handhabung von Sicherheitsbereichseinsätzen für iOS 11 oder höher

Blog

Natives React-Modul zur nativen Handhabung von Sicherheitsbereichseinsätzen für iOS 11 oder höher

Reaktiver-nativer-sicherer-Bereich

React Native-Modul zur nativen Handhabung von Sicherheitsbereichseinsätzen für iOS 11 oder höher.



rnsf

Installation

1. Installieren Sie die Bibliothek von |_+_|

npm

2. Nativen Code verknüpfen

Sie können nativen Code nach Belieben verknüpfen:



Kakaoschoten

Fügen Sie Ihrem Projektzielabschnitt in Ihrem Podfile eine Zeile hinzu:

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

Wenn Sie den Fehler |_+_| erhalten haben, fügen Sie die folgenden Zeilen zu Ihrer Poddatei hinzu und installieren Sie die Pods neu.



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

Reaktiv-nativer Link

Führen Sie den folgenden Befehl aus:

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

Verwendungszweck

Mit Ansichten arbeiten

Verwenden Sie |_+_| um automatisch Einschübe für sichere Bereiche auf Ansichten anzuwenden.

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(Komponente[, applyTo][, Richtung])

Eine Komponente höherer Ordnung, die Sicherheitsbereichseinsätze automatisch auf die umhüllte Komponente anwendet.

  • react-native link react-native-safe-area : Komponente - Eingewickelte Komponente.
  • withSafeArea : Schnur - (Optional) Geben Sie die Eigenschaft an, um Einschübe für sichere Bereiche anzuwenden.
    • |_+_| - |_+_|. (Standard)
    • import { withSafeArea } from 'react-native-safe-area' - component.
    • |_+_| - |_+_|, |_+_|, |_+_| und |_+_|.
    • |_+_| - |_+_| und |_+_| für Scroll-Ansichten.
  • applyTo : Schnur - (Optional) Geben Sie die Richtung an, um Einsätze für sichere Bereiche anzuwenden.
    • |_+_| - Nach oben auftragen.
    • |_+_| - Unten auftragen.
    • |_+_| - Bewerben Sie sich links.
    • |_+_| - Bewerben Sie sich rechts.
    • 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)
Beispiel für einfache Ansicht
left
ScrollView-Beispiel
right

Sie können auch Einschübe für sichere Bereiche auf FlatList und SectionList anwenden.

APIs der erweiterten Komponente

bekomme |_+_| : ref

Gibt die Ref der verpackten Komponente zurück.

bekomme |_+_| : SafeAreaInsets

Gibt aktuelle Einschübe für sichere Bereiche zurück.

Sicheren Bereich manuell handhaben

horizontalAndTop

Wenn Sie |_+_| . verwenden möchten type, können Sie es wie folgt importieren:

horizontal

Abrufen von sicheren Bereichseinsätzen für die Root-Ansicht

top

Behandeln Sie das geänderte Ereignis des sicheren Bereichs

horizontalAndBottom

Beispiele

Ein einfaches Beispielprojekt finden Sie hier.

Download-Details:

Autor: miyabi

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

Können wir Bürger Hotbit benutzen?

#reagieren-nativ #reagieren #mobile-apps