React-Native 自定义Android原生组件--弹出提示框

特别说明：本文仅适合未接触过或不熟悉Android原生开发的React-Native新手开发者！

背景：使用React-Native开发Android APP时，虽然React-Native已经自带弹出提示框组件Alert，但由于各大手机厂商系统风格各异，在使用React-Native自带的弹出提示组件时也风格不一，并且大部分机型的弹出框样式比较难看，或者和APP的整体风格设计不协调，当然也可以使用Modal来实现弹出框，但是又得在所有需要的View添加Modal相应标签，较为繁琐，所以本文介绍一个简单的自定义弹出框的基本步骤。

效果预览：

android-confirm.jpg

一、设计布局文件

弹出框多为提示框（alert），确认框（confirm）本实例展示一个简单的确认框（即包含“确认”和“取消”按钮）。具体的文字，颜色，背景色等按需修改为和UI设计风格较为统一的即可（可在Android Studio 中可视化设计）！

二、添加Moudle类

该类为已设计的弹出框提供提供React-Native调用入口。

package com.xxx.xxx;//您的包名
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TextView;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class xxxModule extends ReactContextBaseJavaModule {
    private AlertDialog dialog=null;
    private static ReactApplicationContext mRAC;
    public  xxxModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mRAC=reactContext;
    }

    @Override
    public String getName() {
        return "xxxModule";
    }

    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }

    //弹出确认取消按钮框
    @ReactMethod
    public void openConfirm(String message,String title, final Callback okBtnBack,final Callback cancelBack) {
        if (message == null || message.equals("")) return;
        Activity activity=getCurrentActivity();
        AlertDialog.Builder builder = new AlertDialog.Builder(activity);
        View view = View.inflate(activity, R.layout.my_dialog, null);
        builder.setView(view);
        builder.setCancelable(true);
        if (title != null && !title.equals("")) {
            TextView tit= (TextView) view.findViewById(R.id.title);//设置标题
            tit.setText(title);
        }
        TextView input_edt= (TextView) view.findViewById(R.id.text_msg);//显示内容
        input_edt.setText(message);
        //取消按钮点击事件
        Button btn_cancel=(Button)view.findViewById(R.id.btn_cancel);//取消按钮
        btn_cancel.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                if(dialog!=null) dialog.dismiss();
                if(cancelBack!=null ) cancelBack.invoke();
            }
        });
        //确定按钮点击事件
        Button btn_comfirm=(Button)view.findViewById(R.id.btn_comfirm);//确定按钮
        btn_comfirm.setOnClickListener(
                new View.OnClickListener(){
                    @Override
                    public void onClick(View v) {
                        if(dialog!=null) dialog.dismiss();
                        if(okBtnBack!=null ) okBtnBack.invoke();
                    }
                }
        );
        dialog = builder.create();
        dialog.setCancelable(false);
        dialog.show();
        //设置弹出框宽度
        Window dialogWindow = dialog.getWindow();
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        WindowManager m =activity.getWindowManager();
        DisplayMetrics metrics = new DisplayMetrics();
        m.getDefaultDisplay().getMetrics(metrics);
        lp.width = (int) (metrics.widthPixels * 0.8);//宽度
        //lp.height = (int) (metrics.heightPixels * 0.8);//高度
        dialogWindow.setAttributes(lp);
    }

    //关闭确认取消按钮框
    @ReactMethod
    public void  closeConfirm(){
        if(dialog!=null) dialog.dismiss();
    }
}

三、通过Package类注册Moudle方法

如果没有则创建xxxPackage类

Package可用于管理所有的原生模块的注册。

package com.xxxxx.xxxx;//您的包名
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

class  xxxPackage implements ReactPackage {

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        ...//其他Module
        modules.add(new xxxModule(reactContext));//您的Moudle
        return modules;
    }
}

四、在MainApplication中注册

 protected List getPackages() {
      return Arrays.asList(
            ...,//其他包
            new xxxPackage() //您在第三步中创建或使用的Package类
      );
    }

五、前端(React-Native)调用

 var xxxModule = NativeModules.xxxModule;//xxxModule为第二步中的Moudle类中的getName方法的返回值

 xxxModule .openConfirm("提示信息","标题",()=>{
    //“确认”按钮点击回调方法
  },()=>{
   //“取消”按钮点击回调方法
 });

个人博客：有恒则成