RN 调用安卓的原生方法（实现Toast效果）

Posted 2020-09-23 谢玉胜的技术文章

首先明确一点，坑实在是是太多了～神奇呀！

ok！

基本思路： 

1.用AS打开一个已经存在的项目（这里可以打开项目中的android也可以是android里面的build.gradle）

2.在AS里新建一个类，这个类继承  ReactContextBaseJavaModule，在这里的所写的原声的方法就将被RN的JS调用

3.在AS里新建一个class 实现接口  ReactPackage，并且把刚创建的类放到包管理器里面

4.将刚创建的包管理器添加到MainApplication里面 

5.在js这边调用（注意：需要重新的run-android）

就以上五步就可以实现基本的调用安卓原生的方法，具体如何实现，最好依照官网所叙述，这里就简单的贴下我自己的所实现的代码：

从第二步开始：

package com.now;

import android.content.Context;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * Created by xieyusheng on 2017/6/18.
 */

public class ToastModule extends ReactContextBaseJavaModule {
    private Context mContext;
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext=reactContext;
    }
    @Override
    public String getName() {
        //这里名字取要慎重，不能个RN的组件相同
        return "ToastModule";
    }
    @ReactMethod
    public void rnCallNative(String msg){
        Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show();
    }
}

 3.第三部

package com.now;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.javascriptModule;
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;

/**
 * Created by xieyusheng on 2017/6/18.
 */

public class AnExampleReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //添加到里面哦
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

 4 ；

package com.now;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              //放到这里哦
              new AnExampleReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

最后的调用：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
//引入哦
  NativeModules
} from ‘react-native‘;


export default class now extends Component {
  test(){
      //原生-原生模块.原生模块li的方法
      NativeModules.ToastModule.rnCallNative("now you see me");
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.test.bind(this)}>
          sdsd 
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent(‘now‘, () => now);