# React Native 集成

集成样例代码

可以在这里获取集成样例代码https://github.com/finogeeks/finclip-react-native-demo (opens new window)

若您所在的环境无法访问 Github，也可以点击这里访问 gitee (opens new window) 的镜像仓库。

# 1. 获取小程序凭据

使用 SDK 需要申请 SDK KEY 及 SDK SECRET ，只有在 SDK 初始化的时候配置了正确的 SDK KEY 及 SDK SECRET ，才能初始化成功并正常使用。

# 1.1 创建应用

注册用户需要登录「应用管理-新增合作应用」，完成应用创建；

# 1.2 获取 SDK KEY 及 SDK SECRET

创建应用并添加 Bundle ID 后，若需要导出对应的 SDK KEY 与 SDK SECRET，请选择对应 Bundle ID 后的「复制」，即可通过Ctrl+V或Command+V进行粘贴操作；

其中：

SDK KEY：是合作应用能使用小程序SDK的凭证，如果SDK Key校验失败，则SDK的所有Api都无法使用。
SDK SECERT：是访问服务的安全证书，不要给第三方。

提示

关于创建应用与获取 SDK KEY 及 SDK SECRET 的详细操作，见「介绍-操作指引-企业端操作指引-7.关联移动应用」一节。

# 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 初始化引擎

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

// 2. mop初始化
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
  MopSDK.initialize({
    appkey:
      'SDK Key信息', // SDK Key
    secret: 'SDK Secret信息', // SDK Secret
    apiServer: '服务器地址', // 服务器地址
    apiPrefix: '/api/v1/mop/', // 服务器接口请求路由前缀
    nativeEventEmitter: eventEmitter,
    finMopSDK: NativeModules.FINMopSDK,
  }).then(res => {
    console.log('初始化成功')
  }).catch(err => {
    console.log('初始化失败')
  })

# 2.3 打开小程序

MopSDK.openApplet({appId: 'xxxx'});  // 小程序 AppID

提示

SDK KEY 和 SECRET 可以从社区版的管理后台中获取；
apiServer 为当前小程序后端的服务地址，也即前文所输入的IP:端口；
小程序 id 为在管理后台上架的小程序唯一ID(在小程序上架时自动生成)；
上述的参数可以在前文服务器部署的后台界面上获取，也可以在没有部署服务端的情况下在 FinClip 官网 (opens new window) 注册体验；
重要事情说四遍，您可以在官方的 Github 仓库 (opens new window)中查看示例代码；
请注意 APP 的 Bundle Id 需要与管理后台中添加的保持一致，可在【企业端-应用管理】中查看。

# 3. 常见问题

Q: 可以使用其他 react-native 版本的 demo 吗？
A: 因为 react-native 不同版本的差别较大，建议使用 0.67.4 的 react-native 版本去运行我们的官方 demo.

Q: 如何清理项目缓存？
A: 理缓存可使用 Metro 的清理工具 (opens new window).

Q: iOS 端在 M1 运行不了 pod install
A: 使用 arch -x86_64 pod install 替代 pod install.