#react-native和原生交互(Android)
1:在Android项目src包下面创建提供给react(以下简称rc)调用的类
package com.view;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.HashMap;
import java.util.Map;
public class ToastModule extends ReactContextBaseJavaModule
{
private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";
public ToastModule( ReactApplicationContext reactContext) {
super(reactContext);
}
//返回String名字是rs调用的名称"ToastForJs"(自己定义不能是ToastAndroid,rs内部定义过)
@Override
public String getName() {
return "ToastForJs";
}
//getConstants是提供给rs里面js调用的key常量
@Override
public Map<String, Object> getConstants() {
final Map<String,Object> map = new HashMap<>();
map.put(DURATION_SHORT_KEY, Toast.LENGTH_LONG);
map.put(DURATION_LONG_KEY, Toast.LENGTH_SHORT);
return map;
}
//定义方法提供给React调用 必须注解成@ReactMethod
@ReactMethod
public void Show(String message,int duration){
Toast.makeText(getReactApplicationContext(),message,duration).show();
}
}
2:注册
在Android项目src包下面创建提供给react(以下简称rc)调用的类的注册类,类名自定义
package com.pkg;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.view.ToastModule;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class ToastPackage implements ReactPackage {
//添加注册模块到list,ToastModule是实现类类名称
@Override
public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) {
List<NativeModule> list = new ArrayList<>();
list.add(new ToastModule(reactContext));
return list;
}
@Override
public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
在MainApplication返回注册的package:new ToastPackage()为需要注册的package
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNGestureHandlerPackage(),
new ToastPackage()
);
}
3:react调用
#最好封装一层js文件,供其他用到的地方直接引用
使用方法:
react里面新增js文件,例如:NativeJs.js,里面只有如下内容,其中ToastForJs是Android原生getName()返回的字符串
import {NativeModules } from 'react-native'
export default NativeModules.ToastForJs;
#引用
头部引用封装js:import NativeAnd from './../CSS/NativeAnd'
使用: NativeAnd.Show("wangkuio123",NativeAnd.SHORT);
其中Show方法就是原生定义的方法,NativeAnd.SHORT是getConstants中map中key值:
//定义方法提供给React调用
@ReactMethod
public void Show(String message,int duration){
Toast.makeText(getReactApplicationContext(),message,duration).show();
}
react-native调用Android原生组件
最新推荐文章于 2021-05-26 08:32:01 发布