react-native 之与"android原生模块"交互
|
使用 使用react-native 与android原生模块交互方式
在描述三种交互方式之前，先描述一下我的交互逻辑。这里我通过从 原生模块的逻辑实现
step导入原生的android模块首先导入原生的android模块项目代码到Android Studio，像这样 step编写原生的android模块代码/** * @Title:ImageCrop * @Package:com.imoocchapterone * @Description:选择剪切图片的接口 * @Auther:YJH * @Email:yuannunhua@gmail.com * @Date:2018/6/1415:28 */
public interface ImageSelector {
/** * @param errorCallback * @param successCallback */
void chooseImgCallback(Callback successCallback,Callback errorCallback);
/** * @param promise */
void chooseImgPromise(Promise promise);
}
/** * @Title:ImageCropImp * @Package:com.imoocchapterone * @Description:选择剪切图片的具体类 * @Auther:YJH * @Email:yuannunhua@gmail.com * @Date:2018/6/1415:30 */
public class ImageSelectorimpl implements ImageSelector,ActivityEventListener {
private Activity mActivity;
private Promise mPromise;
private Callback errorCallback;
private Callback successCallback;
private ImageSelectorimpl(Activity activity) {
this.mActivity = activity;
}
/** * 功能：获取 ImageSelectorimpl 对象的实例 * @param activity * @return */
public static ImageSelectorimpl of(Activity activity) {
return new ImageSelectorimpl(activity);
}
/** * 使用Promise回调方式 * 功能：实现ImageCrop接口中的方法 * @param promise */
@Override
public void chooseImgPromise(Promise promise) {
this.mPromise = promise;
getSelectAlbum();
}
/** * 使用Callback回调方式 * 功能：实现ImageCrop接口中的方法 * @param promise */
@Override
public void chooseImgCallback(Callback successCallback,Callback errorCallback) {
this.successCallback = successCallback;
this.errorCallback = errorCallback;
getSelectAlbum();
}
public void updateActivity(Activity activity) {
this.mActivity = activity;
}
/** * 功能：实现ActivityEventListener接口中的方法 * @param activity * @param requestCode * @param resultCode * @param data */
@Override
public void onActivityResult(Activity activity,int requestCode,int resultCode,Intent data) {
if (resultCode == RESULT_OK) {
switch (requestCode) {
case PictureConfig.CHOOSE_REQUEST:
// 图片选择结果回调
selectList = PictureSelector.obtainMultipleResult(data);
// successCallback.invoke(selectList.get(0).getPath());//Callback回调
mPromise.resolve(selectList.get(0).getPath());//mPromise回调
break;
}
} else {
mPromise.reject("no img get.");//mPromise回调
// errorCallback.invoke(CODE_ERROR_CROP,"裁剪失败");//Callback回调
}
}
/** * 功能：实现ActivityEventListener接口中的方法 * * @param intent */
@Override
public void onNewIntent(Intent intent) {
// 无操作
}
private int chooseMode = PictureMimeType.ofAll();
private List<LocalMedia> selectList = new ArrayList<>();
//打开相册功能
public void getSelectAlbum() {
// 进入相册 以下是例子：用不到的api可以不写
PictureSelector.create(mActivity)
.openGallery(chooseMode)//全部.PictureMimeType.ofAll()、图片.ofImage()、视频.ofVideo()、音频.ofAudio()
.theme(R.style.picture_default_style)//主题样式(不设置为默认样式) 也可参考demo values/styles下 例如：R.style.picture.white.style
.maxSelectNum(1)// 最大图片选择数量 int
.minSelectNum(1)// 最小选择数量 int
...
.forResult(PictureConfig.CHOOSE_REQUEST);//结果回调onActivityResult code
}
}
以上是在原生代码中去实现操作原生模块逻辑的java代码 /** * @Title:ImageSelectorModule * @Package:com.imoocchapterone * @Description:实现对react-native的接口暴露 * @Auther:YJH * @Email:yuannunhua@gmail.com * @Date:2018/6/1415:59 */
public class ImageSelectorModule extends ReactContextBaseJavaModule implements ImageSelector {
private ImageSelectorimpl mImageSelectorimpl;
public ImageSelectorModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "ImageSelector";
}
/** * 功能：向React Native暴露的接口，并执行数据交互操作 */
@ReactMethod
@Override
public void chooseImgCallback(Callback successCallback,Callback errorCallback) {
if(null == mImageSelectorimpl){
mImageSelectorimpl = ImageSelectorimpl.of(getCurrentActivity());
getReactApplicationContext().addActivityEventListener(mImageSelectorimpl);
}
mImageSelectorimpl.chooseImgCallback(successCallback,errorCallback);
}
@ReactMethod
@Override
public void chooseImgPromise(Promise promise) {
if(null == mImageSelectorimpl){
mImageSelectorimpl = ImageSelectorimpl.of(getCurrentActivity());
getReactApplicationContext().addActivityEventListener(mImageSelectorimpl);
}
// mImageSelectorimpl.updateActivity(getCurrentActivity());
mImageSelectorimpl.chooseImgPromise(promise);
}
}
当然对于 public abstract class ReactContextBaseJavaModule extends BaseJavaModule {
...
/** * Subclasses can use this method to access catalyst context passed as a constructor */
protected final ReactApplicationContext getReactApplicationContext() {
return mReactApplicationContext;
}
/** * Get the activity to which this context is currently attached,or {@code null} if not attached. * * DO NOT HOLD LONG-LIVED REFERENCES TO THE OBJECT RETURNED BY THIS METHOD,AS THIS WILL CAUSE * MEMORY LEAKS. * * For example,never store the value returned by this method in a member variable. Instead,call * this method whenever you actually need the Activity and make sure to check for {@code null}. */
protected @Nullable final Activity getCurrentActivity() {
return mReactApplicationContext.getCurrentActivity();
}
}
关键的两个方法 /** * @Title:ImageReactPackage * @Package:com.imoocchapterone * @Description:注册、导出react-native的原生模块<格式是基本固定的> * @Auther:YJH * @Email:yuannunhua@gmail.com * @Date:2018/6/1416:44 */
public class ImageReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ImageSelectorModule(reactContext));
return modules;
}
...
}
实现注册，且只有在实现了接口 public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new ImageReactPackage()
);
}
};
...
}
以上就是在android模块引入第三方类库，并实现可与 /** * Created by YJH on 2018/6/14. */
import {NativeModules} from 'react-native';
export default NativeModules.ImageSelector;
当然有导出，只在我们需要使用的地方导入就可以使用了
|