React Native中使用Kotlin_Zih_An_kotlin react native

网络投稿 02-07 4609

写在前面

github项目地址

目前该项目做了部分修改，但仍可以clone之后使用git回退到第二个commit的版本查看计算A+B测试的完整代码，具体步骤：

git clone https://github.com/zih-an/RNwithKotlin.gitcd RNwithKotlingit log，找到以下红色箭头 modify the readme 的版本4. git checkout 40c057ddc645762d3b31126f923971c1890a57fa 即可！（此时该项目即为本博客的A+B示例完整版）介绍

现希望用 kotlin 计算 a+b 的值返回，用 react-native 调用并显示结果

a+b在文件AlertManager.kt中 fun trigger(a:Double, b:Double, resPromise:Promise) react-native只能使用async & await接收结果，参见文件App.js此外，java和kotlin同时存在并不影响，因此react-native生成的java文件不用动详细步骤 1 初始化React Native项目

详情参考官网 npx react-native init RNwithKotlin

2 使用Android Studio打开 android 文件夹 2.1 android/build.gradle buildscript { //== add 1. == ext.kotlin_version = "1.4.32" ... repositories { ... //== add 2. == maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } } dependencies { ... //== add 3. == classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } allprojects { repositories { ... //== add 4. == jcenter() maven { url 'https://www.jitpack.io' } } } 2.2 android/app/build.gradle /**============ add here ===============*/ apply plugin: "kotlin-android" ... android { ... //============== add here ======================= buildFeatures { viewBinding true } } dependencies { ... //============== add here ======================= implementation "org.jetbrains.kotlin:kotlin-stdlib" ... } 2.3 aplusb.kt package com.rnwithkotlin import android.view.View import com.facebook.react.ReactPackage import com.facebook.react.bridge.NativeModule import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.uimanager.ViewManager import java.util.* class AplusB:ReactPackage { override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> { val modules = ArrayList<NativeModule>() modules.add(AlertManager(reactContext)) return modules } override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> { return Collections.emptyList<ViewManager<*, *>>() } } 2.4 AlertManager.kt package com.rnwithkotlin import android.content.Intent import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.bridge.ReactContextBaseJavaModule import com.facebook.react.bridge.ReactMethod import com.facebook.react.bridge.Promise; class AlertManager(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { private final var TAG = "AlertMangager"; override fun getName(): String { return "Alt" } @ReactMethod //=========== a+b here =============== // have to use promise to get the result async. fun trigger(a:Double, b:Double, resPromise:Promise) { resPromise.resolve(a+b); } } 2.5 MainApplication.java @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); //============================= add here =============================== packages.add(new AplusB()); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } 3 export the module

in kotlin.js:

import {NativeModules} from 'react-native'; const {Alt} = NativeModules; console.log('Alt: ', Alt); export default Alt;

现在可以调用 Alt.trigger(a,b)，例如App.js 中:

import React from 'react'; import {View, Text} from 'react-native'; import Alt from './kotlin'; export default class App extends React.Component { state = {res: 0}; async componentDidMount() { let tmp = await Alt.trigger(10, 3); // test value here! console.log(tmp); this.setState({res: tmp}); } render() { return ( <View> <Text>Hello ReactNative</Text> <Text>this is a+b from kotlin: {this.state.res}</Text> </View> ); } } 4 测试

npx react-native run-android