ReactNative-JS 调用原生方法实例代码(转载)

Posted 2020-11-02 寒夜美美

第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule

package com.mixture;

 

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;

 

public class MyNativeModule extends ReactContextBaseJavaModule {

 

  public static final String REACTCLASSNAME = "MyNativeModule";

  private Context mContext;

 

  public MyNativeModule(ReactApplicationContext reactContext) {

    super(reactContext);

    mContext = reactContext;

  }

 

  @Override

  public String getName() {

    return REACTCLASSNAME;

  }

 

  /**

   * 必须添加反射注解不然会报错

   * 这个方法就是ReactNative将要调用的方法，会通过此类名字调用

   * @param msg

   */

  @ReactMethod

  public void callNativeMethod(String msg) {

    Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();

  }

}

 

第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中

 

package com.mixture;   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 Administrator on 2016/9/22.  */   public class MyReactPackage implements ReactPackage {     @Override   public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {     List<NativeModule> modules = new ArrayList<>();     modules.add(new MyNativeModule(reactContext));     return modules;   }     @Override   public List<Class<? extends JavaScriptModule>> createJSModules() {     return Collections.emptyList();   }     @Override   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {     return Collections.emptyList();   } }

第三步在应用入口注册这个React包管理器

package com.mixture;

 

import android.app.Application;

import android.util.Log;

 

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

 

import java.util.Arrays;

import java.util.List;

 

public class MainApplication extends Application implements ReactApplication {

 

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override

    protected boolean getUseDeveloperSupport() {

      return BuildConfig.DEBUG;

    }

 

    @Override

    protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(

          new MainReactPackage(),

          //在应用中注册这个包管理器

          new MyReactPackage()

      );

    }

  };

 

  @Override

  public ReactNativeHost getReactNativeHost() {

    return mReactNativeHost;

  }

}

第四步就是在ReactNative中调用react-native中提供一个NativeModules通过模块名字和方法名字进行调用

/**  * 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‘;   class Mixture extends Component {   render() {     return (       <View style={styles.container}>         <Text style={styles.instructions} onPress={() => this.onClick()}>           调用用原生方法         </Text>       </View>     );   }     /**    * 调用原生方法    */   onClick() {     NativeModules.MyNativeModule.callNativeMethod(‘成功调用原生方法‘);   } } const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: ‘center‘,     alignItems: ‘center‘,     backgroundColor: ‘#F5FCFF‘,   },   instructions: {     textAlign: ‘center‘,     color: ‘#333333‘,     marginBottom: 5,   }, });   AppRegistry.registerComponent(‘Mixture‘, () => Mixture);