ios才是react-native的親兒子....
Android and iOS.jpg
-
想要自定義Android對(duì)話框需要Android原生開(kāi)發(fā)基礎(chǔ)
-
在Android工程里面將dialog封裝好仅孩，用來(lái)備用。
1印蓖、新建 一個(gè)Mode 我們起名為‘'DateModule" 繼承 ReactContextBaseJavaModule辽慕，
設(shè)置組件名，自定義調(diào)用方法赦肃，回調(diào)參數(shù)溅蛉，只需將選好的日期返回。
方法如下：
/**
* Description:選擇日歷組件
* Data：2017-03-01-18:45
*/
public class DateModule extends ReactContextBaseJavaModule {
private Context mContext;
public DateModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}
// 復(fù)寫(xiě)方法摆尝，返回react-native中調(diào)用的 組件名
@Override
public String getName() {
return "DateModule";
}
// 使用 @ReactMethod注解返回react-native中可調(diào)用的 方法
@ReactMethod
public void show(final Callback successCallback) {
//新建自定義對(duì)話框
final SelectDateDialog dialog = new SelectDateDialog(getCurrentActivity());
dialog.show();
//得到dialog的確定按鈕并設(shè)置點(diǎn)擊事件
dialog.getBtnCollectOk().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//回調(diào)方法温艇，將所選日期返回
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 下堕汞，原生方法已經(jīng)寫(xiě)好
Paste_Image.png
4.在react中將所寫(xiě)的模塊引入勺爱，調(diào)用方法即可
//引入原生模塊
let date = NativeModules.DateModule;
//點(diǎn)擊事件方法
onPress={()=>{
date.show((message)=>{console.log("選擇的時(shí)間是===",message)});
}}
5.彈出你所自定義的對(duì)話框，通過(guò)回調(diào)方法得到所選的日期
Paste_Image.png
