React-Native 调用原生方法，弹出自定义对话框

ios才是react-native的亲儿子....

Android and iOS.jpg

• 想要自定义Android对话框需要Android原生开发基础

• 在Android工程里面将dialog封装好，用来备用。

1、新建 一个Mode 我们起名为‘'DateModule" 继承 ReactContextBaseJavaModule，

  设置组件名，自定义调用方法，回调参数，只需将选好的日期返回。

方法如下：

/**
 * Description:选择日历组件
 * Data：2017-03-01-18:45
 * Author: 周祥
 */
public class DateModule extends ReactContextBaseJavaModule {
    private Context mContext;

    public DateModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    // 复写方法，返回react-native中调用的 组件名
    @Override
    public String getName() {
        return "DateModule";
    }

    // 使用 @ReactMethod注解返回react-native中可调用的 方法
    @ReactMethod
    public void show(final Callback successCallback) {
        //新建自定义对话框
        final SelectDateDialog dialog = new SelectDateDialog(getCurrentActivity());
        dialog.show();
        //得到dialog的确定按钮并设置点击事件
        dialog.getBtnCollectOk().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //回调方法，将所选日期返回
                successCallback.invoke(dialog.getSelectDate());
                dialog.dismiss();
            }
        });
    }
}

2、 新建 MyReactPackage 文件继承 ReactPackage

方法如下:

public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new DateModule(reactContext));
        return modules;

    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new MyTextViewManager(),
                new MySwichManager()
        );
    }
}

3.最后将MyReactPackage 放到MainApplication 下，原生方法已经写好

Paste_Image.png

4.在react中将所写的模块引入，调用方法即可

//引入原生模块
let date = NativeModules.DateModule;
//点击事件方法
onPress={()=>{
          date.show((message)=>{console.log("选择的时间是===",message)});
        }}

5.弹出你所自定义的对话框，通过回调方法得到所选的日期

Paste_Image.png