ios才是react-native的亲儿子....
Android and iOS.jpg
-
想要自定义Android对话框需要Android原生开发基础
-
在Android工程里面将dialog封装好，用来备用。
1、新建 一个Mode 我们起名为‘'DateModule" 继承 ReactContextBaseJavaModule，
设置组件名，自定义调用方法，回调参数，只需将选好的日期返回。
方法如下：
/**
* Description:选择日历组件
* Data：2017-03-01-18:45
*/
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
