FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# React Native 集成

集成样例代码

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

# 1. 获取凭据

请注意

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

您可以 【点击这里】 查看如何获取所需要的 SDK KEYSDK 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);
  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

# 3. 常见问题

# 3.1 可以使用其他 react-native 版本的 demo 吗?

答:因为 react-native 不同版本的差别较大,建议使用 0.67.4 的 react-native 版本去运行我们的官方 demo.

# 3.2 如何清理项目缓存?

答:清理缓存可使用 Metro 的清理工具 (opens new window).

# 3.3 iOS 端在 M1 运行不了 pod install?

答:使用 arch -x86_64 pod install替代 pod install.

# 3.4 运行 demo 时出现:No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found 报错

答: 参考 #issue-35210 (opens new window) 解决

# 3.5 用 Android Studio 运行 react-native demo 时,出现:Cannot run program "node": error=2, No such file or directory 报错

答:在终端通过输入命令: open -a /Applications/Android\ Studio.app 的方式打开

# 3.6 如遇: Plugin with id maven not found. 报错

答:请把 react-native-mopsdk 升级至 2.0.1 版本

# 3.7 如果要升级react-native版本到比较高的版本(如:0.73.0),会遇到Android相关的编译问题如何解?

答: 1、准备好环境: 更新最新版本的 Android Studio(版本过低无法编译)、并安装好Java (JDK17)、Node版本20.0.0以上、安装好yarn(后续命令最好都是使用yarn); 2、使用RN官方升级版本对比工具:https://react-native-community.github.io/upgrade-helper/?from=0.72.6&to=0.73.0。对比自己项目哪些RN使用的库是需要改动的。 3、针对Android项目修改:

  1. gradle版本修改:文件路径gradle/wrapper/gradle-wrapper.properties
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

  1. 修改app目录下的build.gradle(app/build.gradle)

    这里要注意以前的一些库被删掉了;所以可能会出现“ReactNativeFlipper”这个类被引用的地方报错,直接删除项目里面这个类就好。新增的库里面直接就有这个类无需在项目里面自定义了,直接导包即可。 另外,manifest文件里面的package属性要删除掉。


apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '..'
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
    // codegenDir = file("../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
    // cliFile = file("../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdk  rootProject.ext.compileSdkVersion

    namespace "com.finogeeks.finclip.demo"

    defaultConfig {
        applicationId "com.finogeeks.finclip.demo"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation("com.facebook.react:flipper-integration")

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)


      
  1. 修改根目录下的build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.


buildscript {
    ext {
        buildToolsVersion = "33.0.1"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        jcenter()

        google()
        jcenter()
        maven {
            url "https://gradle.finogeeks.club/repository/applet/"
            credentials {
                username "applet"
                password "123321"
            }
        }
        maven { url "https://jitpack.io" }
    }
    dependencies {
        classpath('com.android.tools.build:gradle:8.3.0')
        classpath("com.facebook.react:react-native-gradle-plugin")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven {
            url "https://gradle.finogeeks.club/repository/applet/"
            credentials {
                username "applet"
                password "123321"
            }
        }
        maven { url "https://jitpack.io" }
    }
}


© FinClip with ❤ , Since 2017