React Native中使用Kotlin

写在前面

github项目地址

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

1. git clone https://github.com/zih-an/RNwithKotlin.git
2. cd RNwithKotlin
3. git 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