მოახდინეთ რეაგირება მშობლიური მოდულისთვის, რათა უსაფრთხოდ გაუმკლავდეთ უსაფრთხო ადგილებს Ios 11 ან უფრო გვიან

ბლოგი

მოახდინეთ რეაგირება მშობლიური მოდულისთვის, რათა უსაფრთხოდ გაუმკლავდეთ უსაფრთხო ადგილებს Ios 11 ან უფრო გვიან

რეაქცია-მშობლიური-უსაფრთხო ტერიტორია

მოახდინეთ რეაგირება მშობლიური მოდულით, რათა გაუმკლავდეთ უსაფრთხო ადგილებს iOS 11 -ისთვის ან უფრო გვიან.



rnsf

ინსტალაცია

1. დააინსტალირეთ ბიბლიოთეკა | _+_ |

npm

2. დააკავშირეთ მშობლიური კოდი

თქვენ შეგიძლიათ დაუკავშიროთ მშობლიური კოდი თქვენთვის სასურველი გზით:



კაკაოს პოდები

დაამატეთ ხაზი თქვენი პროექტის სამიზნე განყოფილებაში თქვენს Podfile- ში:

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

თუ თქვენ მიიღეთ შეცდომა | _+_ |, დაამატეთ ქვემოთა ხაზები თქვენს Podfile- ში და ხელახლა დააინსტალირეთ ბუდეები.



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

რეაქციის მშობლიური ბმული

გაუშვით ბრძანება ქვემოთ:

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

გამოყენება

იმუშავეთ შეხედულებებით

გამოიყენეთ | _+_ | ავტომატურად გამოიყენოს უსაფრთხო ტერიტორიის ჩანაწერები ნახვებზე.

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 (კომპონენტი [, მიმართვა] [, მიმართულება])

უმაღლესი რიგის კომპონენტი, რომელიც უსაფრთხოდ იყენებს უსაფრთხო ადგილს შეფუთულ კომპონენტზე.

  • react-native link react-native-safe-area : Კომპონენტი - შეფუთული კომპონენტი.
  • withSafeArea : სიმებიანი - (სურვილისამებრ) მიუთითეთ ქონება უსაფრთხო ზონაში შესასვლელად.
    • | _+_ | - | _+_ |. (ნაგულისხმევი)
    • import { withSafeArea } from 'react-native-safe-area' - component.
    • | _+_ | - | _+_ |, | _+_ |, | _+_ | და | _+_ |.
    • | _+_ | - | _+_ | და | _+_ | გადახვევის ხედებისთვის.
  • applyTo : სიმებიანი - (სურვილისამებრ) მიუთითეთ მიმართულება უსაფრთხო ზონაში ჩასასმელად.
    • | _+_ | - წაისვით ზემოდან.
    • | _+_ | - წაისვით ბოლოში.
    • | _+_ | - წაისვით მარცხნივ.
    • | _+_ | - მიმართეთ მარჯვნივ.
    • 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.
    • | _+_ | - | _+_ | + | _+ _ |. (ნაგულისხმევი)
მარტივი ხედვის მაგალითი
left
ScrollView მაგალითი
right

თქვენ ასევე შეგიძლიათ გამოიყენოთ უსაფრთხო ადგილის ჩანაწერები FlatList და SectionList.

გაძლიერებული კომპონენტის API

მიიღეთ | _+_ | : ref

აბრუნებს შეფუთული კომპონენტის რეფერალს.

მიიღეთ | _+_ | : SafeAreaInsets

აბრუნებს ამჟამინდელ უსაფრთხო ზონას.

ხელით გაუმკლავდეთ უსაფრთხო ადგილს

horizontalAndTop

თუ გსურთ გამოიყენოთ | _+_ | ჩაწერეთ, შეგიძლიათ მისი იმპორტი ქვემოთ:

horizontal

მიიღეთ უსაფრთხო ზონის ჩანაწერები ფესვის ხედვისთვის

top

გაუმკლავდეს უსაფრთხო ზონას, შეიცვალა მოვლენა

horizontalAndBottom

მაგალითები

აქ არის მარტივი პროექტის მაგალითი.

ჩამოტვირთეთ დეტალები:

ავტორი: მიაბი

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

რა არის კოცონის კრიპტო

#რეაქცია-მშობლიური #რეაგირება #მობილური აპლიკაცია