InAppBrowser за React Native (Android и iOS)

Блог

InAppBrowser за React Native (Android и iOS)

InAppBrowser за React Native

Приготвяме се да започнем

$ npm install react-native-inappbrowser-reborn --save

Предимно автоматична инсталация

Използване на React Native> = 0,60

Свързването на пакета ръчно вече не се изисква с Автоматично свързване .

  • iOS платформа:

    | _+_ | # CocoaPods на iOS се нуждае от тази допълнителна стъпка

  • Android платформа с поддръжка на Android:

    Използвайки Инструмент за изтласкване за обратна съвместимост.

    Променете своя android/build.gradle конфигурация:

    $ cd ios && pod install && cd ..
  • Android платформа с AndroidX:

    Променете своя android/build.gradle конфигурация:

    buildscript { ext { buildToolsVersion = '28.0.3' minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Only using Android Support libraries supportLibVersion = '28.0.0' }

Използване на React Native<0.60

buildscript { ext { buildToolsVersion = '28.0.3' minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Remove 'supportLibVersion' property and put specific versions for AndroidX libraries androidXAnnotation = '1.1.0' androidXBrowser = '1.0.0' // Put here other AndroidX dependencies }

Ръчен монтаж

ios

  1. В XCode в навигатора на проекта щракнете с десния бутон | _+_ | ➜ | _+_ |
  2. Отидете на | _+_ | ➜ | _+_ | и добавете | _+_ |
  3. В XCode, в навигатора за проекти, изберете вашия проект. Добавяне | _+_ | към вашия проект | _+_ | ➜ | _+_ |
  4. Изпълнете вашия проект (| _+_ |)<

iOS с Podfile

  1. Отворете | _+_ |
  • Добавяне | _+_ |
  1. Изпълнете | _+_ |

Android

  1. Отворете | _+_ |
  • Добавяне | _+_ | към импортирането в горната част на файла
  • Добавяне | _+_ | към списъка, върнат от | _+_ | метод
  1. Добавете следните редове към | _+_ |:

    $ react-native link react-native-inappbrowser-reborn
  2. Вмъкнете следните редове в блока на зависимостите в | _+_ |:

    Libraries
  3. Актуализиране на конфигурацията на ProGuard (по избор)

  • Добавете следните редове към конфигурацията на ProGuard (| _+_ |)

    Add Files to [your project's name]

Употреба

Методи Действие
node_modules Отваря url със Safari в модален режим на iOS, използвайки SFSafariViewController и Chrome в нов персонализиран раздел на Android. В iOS модалният Safari няма да споделя бисквитки със системата Safari.
react-native-inappbrowser-reborn Отхвърля представения от системата уеб браузър.
RNInAppBrowser.xcodeproj Отваря url със Safari в модален режим на iOS, използвайки SFAuthenticationSession/ASWebAuthenticationSession и Chrome в нов персонализиран раздел на Android. В iOS потребителят ще бъде попитан дали да позволи на приложението да се удостоверява чрез дадения URL адрес (OAuth поток с пренасочване с дълбоко свързване) .
libRNInAppBrowser.a Отхвърля текущата сесия за удостоверяване.
Build Phases Открийте дали устройството поддържа този плъгин.

Опции за iOS

Имот Описание
| _+_ | (Низ) Стилът на бутона за отхвърляне. [| _+_ |/| _+_ |/| _+_ |]
| _+_ | (Низ) Цветът за оцветяване на фона на лентата за навигация и лентата с инструменти. [| _+_ |/| _+_ |]
| _+_ | (Низ) Цветът за оцветяване на контролните бутони на навигационната лента и лентата с инструменти. [| _+_ |/| _+_ |]
| _+_ | (Булев) Стойност, която определя дали Safari трябва да влезе в режим Reader, ако е наличен. [| _+_ |/| _+_ |]
| _+_ | (Булев) Анимирайте презентацията. [| _+_ |/| _+_ |]
| _+_ | (Низ) Стилът на представяне за модално представени контролери за изглед. [| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |/| _+_ |]
| _+_ | (Низ) Стилът на преход, който да се използва при представяне на контролера за изглед. [| _+_ |/| _+_ |/| _+_ |/| _+_ |]
| _+_ | (Булев) Представете SafariViewController модално или вместо push. [| _+_ |/| _+_ |]
| _+_ | (Булев) Определя дали лентите с инструменти на браузъра ще се сринат или не. [| _+_ |/| _+_ |]
| _+_ | (Булев) Предотвратяване на повторно използване на бисквитки от предишната сесия (само с openAuth) [| _+_ |/| _+_ |]

Опции за Android

Имот Описание
| _+_ | (Булев) Задава дали заглавието да се показва в персонализирания раздел. [| _+_ |/| _+_ |]
| _+_ | (Низ) Задава цвета на лентата с инструменти. [| _+_ |/| _+_ |]
| _+_ | (Низ) Задава цвета на вторичната лента с инструменти. [| _+_ |/| _+_ |]
| _+_ | (Булев) Разрешава URL лентата да се скрие, докато потребителят превърта надолу по страницата. [| _+_ |/| _+_ |]
| _+_ | (Булев) Добавя елемент за споделяне по подразбиране в менюто. [| _+_ |/| _+_ |]
| _+_ | (Обект) Задава начална и изходна анимация. [| _+_ |]
| _+_ | (Обект) Данните са двойки ключ/стойност, те ще бъдат изпратени в заглавките на HTTP заявка за предоставения URL адрес. [| _+_ |]
| _+_ | (Булев) Отворете персонализиран раздел в нова задача, за да избегнете проблеми с пренасочването обратно към схемата на приложението. [| _+_ |/| _+_ |]

Демонстрация

Link Binary With Libraries

Поток на удостоверяване с помощта на дълбоко свързване

За да пренасочите обратно към приложението си от уеб браузър, трябва да посочите уникален URI за приложението си. За да направите това, дефинирайте схемата на приложението си и заменете | _+_ | и | _+_ | с вашата информация.

Cmd+R
  • Активиране на дълбоко свързване (iOS) - Info.plist
ios/Podfile
  • utilities.js
pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'pod install
  • LoginComponent
android/app/src/main/java/[...]/MainApplication.java
  • SplashComponent
import com.proyecto26.inappbrowser.RNInAppBrowserPackage;
  • Компонент за обратно повикване
new RNInAppBrowserPackage()

Лента за състоянието

StatusBar ще запази последната, предоставена във вашето приложение. Така че, ако StatusBar е | _+_ | преди да отворите браузъра, това ще го запази.

реагирайте на родния избор на време

Започвайки с React Native 0.59 нататък, има по -прост начин за работа с тази актуализация, без да е необходимо да се закърпват StatusBar.

getPackages()

За предишните версии все още можете да приложите описания по -долу метод.

Ако искате да промените преди отваряне, можете да направите нещо подобно

android/settings.gradle

Ако трябва да възстановите стария стил на лентата, след като браузърът е отхвърлен, можете да опитате да закърпите функцията StatusBar.setBarStyle, за да съхраните старата стойност така:

include ':react-native-inappbrowser-reborn' project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-inappbrowser-reborn/android')

Можете да възстановите стария стил на лентата, след като браузърът е бил отхвърлен по следния начин:

android/app/build.gradle

Удостоверяване

Използване на раздели в браузъра в приложението (като SFAuthenticationSession/ASWebAuthenticationSession и персонализирани раздели за Android), когато има такива. Вградените потребителски агенти, известни като уеб изгледи (като UIWebView и WKWebView), изрично не се поддържат поради използваемостта и сигурността, документирани в Раздел 8.12 от RFC 8252 .

Подробности за изтегляне:

Автор: проект26

GitHub: https://github.com/proyecto26/react-native-inappbrowser

#React-native #react #мобилни приложения