安装Node和JDK8

下载Node长期支持版

https://nodejs.org/dist/v14.15.4/node-v14.15.4-x64.msi

下载JDK 8

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

使用nrm工具切换淘宝源

1	npx nrm use taobao

安装Yarn工具

1	npm install -g yarn

安装Android

下载和安装Android开发环境

https://redirector.gvt1.com/edgedl/android/studio/install/4.1.2.0/android-studio-ide-201.7042882-windows.exe

选择Custom安装，包括 Android SDK、Android SDK Platform、Android Virtual Device三个包，

SDK Manager 安装：

1 2	Android SDK Platform 25 （Andriod 7.1.1） Intel x86 Atom_64 System Image

配置环境

增加环境变量ANDROID_HOME

1	ANDROID_HOME = C:\Users\【你的用户名】\AppData\Local\Android\Sdk

增加系统Path

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

创建新项目

在工作目录下创建 AwesomeProject项目

1
2
3

npx react-native init AwesomeProject
cd AwesomeProject
yarn react-native run-android

增加Android 原生模块的交互

ToastModule和CustomToastPackage

在路径：android/app/src/main/java/com/awesomeproject下增加两个文件

ToastModule.java

// 1、 ToastModule.java
package com.awesomeproject;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

import java.util.Map;
import java.util.HashMap;

public class ToastModule extends ReactContextBaseJavaModule {
  private static ReactApplicationContext reactContext;

  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

  @Override
  public String getName() {
    return "ToastExample";  //模块名称
  }

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
    return constants;
  }

  // 直接调用  
  @ReactMethod  
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }

  // 参数传递与返回  
  @ReactMethod
  public void callBackMethod(String paramsFromJS, Callback errorCallback, Callback successCallback) {
    // Log.d("ToastModule", "CallbackMethod:" + paramsFromJS);
    boolean result = false;
    if (result) {
      successCallback.invoke("callBack Ok：" + paramsFromJS);
    } else {
      errorCallback.invoke("callback Err:" + paramsFromJS);
    }
  }
}

CustomToastPackage.java

// CustomToastPackage.java
// 包

package com.awesomeproject;

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.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomToastPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new ToastModule(reactContext));

    return modules;
  }

}

在 android/app/src/main/java/com/awesomeproject/MainApplication.java引入包

import com.awesomeproject.CustomToastPackage; // <-- 引入你自己的包

    @Override
    protected List<ReactPackage> getPackages() {
   	  // 新增...
      packages.add(new CustomToastPackage()); // <-- 添加这一行，类名替换成你的Package类的名字 name.
      return packages;
    }

新增 /ToastExample.js文件。

1
2
3

// ToastExample.js
import {NativeModules} from 'react-native';
export default NativeModules.ToastExample;

修改/App.js。增加

import {
  //...
  TouchableHighlight,
  TouchableOpacity,
  //...
} from 'react-native';

import ToastExample from './ToastExample';

	    <TouchableHighlight
                style={styles.button}
                onPress={() =>
                  ToastExample.show(
                    '集成Andriod原生模块，显示Toast',
                    ToastExample.SHORT,
                  )
                }>
                <Text style={styles.bottonTitle}>
                  集成Andriod原生模块，显示Toast
                </Text>
              </TouchableHighlight>
			
             <TouchableOpacity
                style={styles.button}
                onPress={() =>
                  ToastExample.callBackMethod(
                    '回调获取返回值',
                    (msg) => {
                      ToastExample.show(
                        'error ret: ' + msg,
                        ToastExample.SHORT,
                      );
                    },
                    (msg) => {
                      ToastExample.show('suc ret: ' + msg, ToastExample.SHORT);
                    },
                  )
                }>
                <Text style={styles.bottonTitle}>回调获取返回值</Text>
              </TouchableOpacity>

//const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#008b8b',
    padding: 10,
  },
  bottonTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
  },
//}

重新编译运行

1	yarn react-native run-android

参考

https://www.react-native.cn/docs/native-modules-android