首先明确一点,坑实在是是太多了~神奇呀!
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);