RN调用原生的方法

原生暴露一个接口给RN使用。
1、用AS打开一个已存在的项目
2、在Android原生创建一个类继承ReactContextBaseJavaModule,这个类里面放需要被rn调用的方法,封装成一个原生模块。

public class MyNativeModule extends ReactContextBaseJavaModule {

    private ReactApplicationContext mContext;

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        //rn代码需要这个名字来调用该类的方法
        return "MyNativeModule";
    }

    //函数不能有返回值,因为被调用的原生代码是异步的;原生代码执行结束之后只能通过回调函数或者发送消息给rn侧
    @ReactMethod
    public void rnCallNative(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
    }
}

3、在Android原生这边创建一个类实现接口ReactPackage包管理器,并把第二步创建的类加到原生模块(NativeModule)列表里

public class MyReactPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List list = new ArrayList<>();
        list.add(new MyNativeModule(reactContext));
        return list;
    }



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

4、将第三步创建的包管理器添加到ReactPackage列表里(getPackage方法里)

public class MainApplication extends Application implements ReactApplication {
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
       @Override
       public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
       }

       @Override
       protected List getPackages() {
           return Arrays.asList(
                   new MainReactPackage(),
                   new MyReactPackage()
           );
       }

       @Override
       protected String getJSMainModuleName() {
           return "index";
       }
   };

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

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

5、在RN中去调用原生模块 添加NativeModules从react-native

import {Platform, StyleSheet, Text, View, NativeModules} from 'react-native';
export default class App extends Component {
  render() {
    return (
      
        Welcome to React Native!
        To get started, edit App.js
        {instructions}
      
    );
  }

  call_button(){
  NativeModules.MyNativeModule.rnCallNative('rn调用native成功!')
  }
}

你可能感兴趣的:(RN调用原生的方法)