调用原生函数在官方网站上有介绍,只不过并不好用。
首先要在原生项目的基础上集成react-native项目,集成过程移步原生集成react-native
1.在android项目中创建如下文件以及函数,要继承ReactContextBaseJavaModule这个类。这里的getName函数返回的字符串就是react-native中的要引入的名字。而其他用@ReactMethod注解,名如其名就是react要调用的方法
public class TestLink extends ReactContextBaseJavaModule {
public TestLink(ReactApplicationContext reactContext) {
super(reactContext);
}
@ReactMethod
public void getResult(int a, int b, Promise promise) {
int c = a + b;
promise.resolve(c);
}
@ReactMethod
public void toastAndroid() {
Toast.makeText(getReactApplicationContext(),"Toast",Toast.LENGTH_SHORT).show();
}
@Override
public String getName() {
return "TestLink";
}
}
2.注册这个模块
在createNativeModules函数中创建了我刚才写的类添加到集合中
public class AndroidPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> list = new ArrayList<>();
//添加到NativeModules
TestLink testLink = new TestLink(reactContext);
list.add(testLink);
return list;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
3.按照官方文档需要在Application.java中的getPackages中添加。。。 反正我按照这个做了很多次没有成功 会报null is …~
因为是android集成react-native的项目,所以肯定在一个页面有ReactRootView对象的创建,我只拿出activity中的onCreate函数,其实单独实现这个只添加了一行代码。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.addPackage(new AndroidPackage()) //这里这里添加刚才注册的模块
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
4.接下来就是react-native代码的事了。以及函数的调用,引入NativeModules,在.TestLink。刚才说了这个“TestLink”就是getName()返回的字符串名字。
import {NativeModules} from 'react-native';
export default NativeModules.TestLink;
在之后就可以引入这个文件直接调用函数了。TestLink.toastAndroid(),就是这样了
<TouchableOpacity
onPress={() =>
TestLink.toastAndroid()
}>
<Text>789789</Text>
</TouchableOpacity>
这篇主要是因为官方文档实现不了,或者没理解其真意。所以做此纪录。