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

犀渠玉剑良家子，白马金羁侠少年。这篇文章主要讲述RN 调用安卓的原生方法（实现Toast效果）相关的知识，希望能为你提供帮助。
首先明确一点，坑实在是是太多了～神奇呀！
【RN 调用安卓的原生方法（实现Toast效果）】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);