@setpartnerstv/react-native-gpbonus-sdk
v2.0.0
Published
GPBonus ReactNative SDK
Downloads
2
Keywords
Readme
@setpartnerstv/react-native-gpbonus-sdk
О проекте
Данный проект позволит вам встроить виджет Газпром Бонус в ваше приложение с использованием React Native.
Минимальные требования
- react native version 0.72.0
- iOS minimum version 12.0
- Android minimum version 10.0 (интеграция возможно и на более старых версиях, но стабильная работа не гарантируется)
How to
Загрузка библиотеки
Интегрировать SDK в свой проект вы можете напрямую из этого репозитория или с использованием npm.
cd my-project
npm install git+https://github.com/SetPartnerstv/reactnative-sdk.git
или
cd my-project
npm i @setpartnerstv/react-native-gpbonus-sdk
либо
yarn add @setpartnerstv/react-native-gpbonus-sdk
Если в основном проекте не используются библиотеки '@react-native-clipboard/clipboard' и 'react-native-webview', то для корректной работы авто линковки необходимо добавить файл react-native.config.js
module.exports = {
dependencies: {
'@react-native-clipboard/clipboard': {},
'react-native-webview': {},
},
};
Demo приложение
В данном репозитории в папке example находится пример работы с SDK в формате отдельного react native приложения. Примеры встраивания кода можете посмотреть в demo проекте.
Поддержка вариантов отображения
В demo режиме можно посмотреть 2 варианта открытия виджета: полноэкранное открытие и открытие внутри окна хост-приложения (вашего приложения).
Usage
Т.к. @setpartnerstv/react-native-gpbonus-sdk
является расширением React Native webview, вы можете использовать Webview props, например :
<RNGPBonus
...
webviewDebuggingEnabled={true}
...
/>
- Import
react-native-gpbonus-sdk
:
import import RNGPBonus from '@setpartnerstv/react-native-gpbonus-sdk';
- Добавьте
<RNGPBonus>
компонент как модальное окно:
<Modal
transparent={true}
animationType={'none'}
visible={isVisible}
onRequestClose={() => {
onWidgetModalClose();
}}>
<View style={styles.centeredModalView}>
<RNGPBonus
ref={gpbWidgetFullRef}
widgetUrl={url}
token={token}
checkExternalUrl={false}
onWidgetClose={onWidgetModalClose}
/>
</View>
</Modal>
либо основной компонент обычного экрана
<View style={styles.widgetContainerWebview}>
<RNGPBonus
ref={gpbWidgetRef}
widgetUrl={url}
token={token}
checkExternalUrl={false}
onWidgetClose={onWidgetClose}
/>
</View>
Для Андроид поддерживается обработка BackHandler, пример использования можно посмотрить в Demo приложении (example)
Для корректной работы открытия внешних ссылок в Андроид, необходимо либо добавить поддержку проверки в хост-приложение,
// Targeting Android 11 (SDK 30) requires you to update your AndroidManifest.xml and include a list of applications you're querying
// <queries>
// <intent>
// <action android:name="android.intent.action.VIEW" />
// <data android:scheme="https" android:host="*" />
// </intent>
// </queries>
либо отключить проверку
<RNGPBonus
...
checkExternalUrl={false}
...
/>
Available props
| Name | Type | Default | Description |
| -------------------------------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| widgetUrl
| string
|https://widget.gazprombonus.ru
| URL виджета (опционально) |
| token
| string
|""
| token текущего пользователя (опционально) |
| checkExternalUrl
| boolean
|true
| проверка внешнего URL перед открытием (актуально для Андроид) (опционально) |
| printDebugInfo
| boolean
|false
| вывод в консоль отладочных сообщений о событиях виджета (опционально) |
| onWidgetClose
| func
|() => void
| вызывается при закрывании виджета по внутренней ссылке (опционально) |
Замечания
По умолчанию SDK виджета настроено на url https://widget.gazprombonus.ru (https://widget.gazprombonus.ru)
Авторизация виджета позволяет авторизовать пользователя посредством передачи токена в url инициализации
License
Исходный код публикуется под лицензией MIT