React Native 集成

集成样例代码

我们提供了 DEMO 工程，开发者可以在Github（国外） (opens new window)或Gitee（国内） (opens new window) 获取集成样例代码。

1. 获取凭据

请注意

集成 SDK 需要先在 FinClip 平台中创建应用并绑定小程序，获得每个应用专属的 SDK KEY及 SDK SECRET后，随后就可以在集成 SDK 时填写对应的参数。打开小程序时 SDK 会自动初始化，并校验 SDK KEY，SDK SECRET与 BundleID(Application ID)是否正确。

您可以 【点击这里】 查看如何获取所需要的 SDK KEY及 SDK SECRET。请务必确认集成 SDK 时填写的参数正确，否则会导致小程序无法打开。

2. 集成插件

2.1 引入插件

引入小程序引擎插件。

在 package.json文件中引入小程序 ReactNative 插件

"react-native-mopsdk": "^1.0.4"

安装插件

$ npm install react-native-mopsdk --save
$ react-native link react-native-mopsdk

2.2 初始化引擎

备注：如果需要其他配置项的初始化方法请参考文档SDK 初始化

import MopSDK from 'react-native-mopsdk';
// 1. 引入 NativeModules, NativeEventEmitter
import { NativeModules, NativeEventEmitter } from 'react-native';

// 2. mop初始化
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
let finStoreConfigA = new FinStoreConfig(
    "22LyZEib0gLTQdU3MUauATBwgfnTCJjdr7FCnywmAEM=",
    "bdfd76cae24d4313",
    "https://api.finclip.com");

let finStoreConfigs = [finStoreConfigA];
let config = new Config(finStoreConfigs,{language:LanguageType.Chinese,userId:"1234567",debug:true,appletDebugMode:BOOLState.BOOLStateTrue}) ;
let uiConfig = new UIConfig({isHideClearCacheMenu:true});
let params = {
  config: config,
  uiConfig: uiConfig,
  finMopSDK: NativeModules.FINMopSDK,
  nativeEventEmitter: eventEmitter
}

MopSDK.initSDK(params).then((res) => {
  console.log('message: ', res);
  const s = JSON.stringify(res);
  this.setState({
    status: 'native callback received',
    message: s,
  });
}).catch((error) => {
  console.log('init error: ', error);
  const s = 'initialize fail'
  this.setState({
    status: 'native callback received',
    message: s,
  });
})

2.3 打开小程序

MopSDK.startApplet({appletId:'64c23309c533620001a1971e', startParams:startParams, reLaunchMode: mode})