特別說明：本文僅適合未接觸過或不熟悉Android原生開發(fā)的React-Native新手開發(fā)者恭理！
背景：使用React-Native開發(fā)Android APP時(shí)，雖然React-Native已經(jīng)自帶彈出提示框組件Alert就缆，但由于各大手機(jī)廠商系統(tǒng)風(fēng)格各異，在使用React-Native自帶的彈出提示組件時(shí)也風(fēng)格不一尤溜，并且大部分機(jī)型的彈出框樣式比較難看倔叼，或者和APP的整體風(fēng)格設(shè)計(jì)不協(xié)調(diào)，當(dāng)然也可以使用Modal來實(shí)現(xiàn)彈出框宫莱，但是又得在所有需要的View添加Modal相應(yīng)標(biāo)簽丈攒，較為繁瑣，所以本文介紹一個(gè)簡(jiǎn)單的自定義彈出框的基本步驟授霸。
效果預(yù)覽：
android-confirm.jpg
一巡验、設(shè)計(jì)布局文件
彈出框多為提示框（alert），確認(rèn)框（confirm）本實(shí)例展示一個(gè)簡(jiǎn)單的確認(rèn)框（即包含“確認(rèn)”和“取消”按鈕）碘耳。具體的文字显设，顏色，背景色等按需修改為和UI設(shè)計(jì)風(fēng)格較為統(tǒng)一的即可（可在Android Studio 中可視化設(shè)計(jì)）辛辨！
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#fff"
android:paddingBottom="15dp">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:padding="5dp"
android:text="溫馨提示"
android:textSize="16sp"
android:textColor="#f18518" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#f18518">
</View>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="您的提示信息捕捂，后期從js端傳入！"
android:id="@+id/text_msg"
android:textSize="15sp"
android:textColor="#000"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="25dp"
android:layout_marginTop="12dp"
android:layout_marginRight="25dp"
android:layout_marginBottom="15dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_cancel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FDEEDF"
android:text="取消"
android:textColor="#f08519"
android:topRightRadius="20dp"
android:textSize="15sp"
android:layout_marginLeft="25dp"
android:layout_marginRight="5dp" />
<View
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#fff">
</View>
<Button
android:id="@+id/btn_comfirm"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f08519"
android:textColor="#fff"
android:text="確定"
android:textSize="15sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="25dp" />
</LinearLayout>
</LinearLayout>
二斗搞、添加Moudle類
該類為已設(shè)計(jì)的彈出框提供提供React-Native調(diào)用入口指攒。
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;
}
//彈出確認(rèn)取消按鈕框
@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);//設(shè)置標(biāo)題
tit.setText(title);
}
TextView input_edt= (TextView) view.findViewById(R.id.text_msg);//顯示內(nèi)容
input_edt.setText(message);
//取消按鈕點(diǎn)擊事件
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();
}
});
//確定按鈕點(diǎn)擊事件
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();
//設(shè)置彈出框?qū)挾? 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);
}
//關(guān)閉確認(rèn)取消按鈕框
@ReactMethod
public void closeConfirm(){
if(dialog!=null) dialog.dismiss();
}
}
三、通過Package類注冊(cè)Moudle方法
如果沒有則創(chuàng)建xxxPackage類
Package可用于管理所有的原生模塊的注冊(cè)榜旦。
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<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
...//其他Module
modules.add(new xxxModule(reactContext));//您的Moudle
return modules;
}
}
四幽七、在MainApplication中注冊(cè)
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...,//其他包
new xxxPackage() //您在第三步中創(chuàng)建或使用的Package類
);
}
五、前端(React-Native)調(diào)用
var xxxModule = NativeModules.xxxModule;//xxxModule為第二步中的Moudle類中的getName方法的返回值
xxxModule .openConfirm("提示信息","標(biāo)題",()=>{
//“確認(rèn)”按鈕點(diǎn)擊回調(diào)方法
},()=>{
//“取消”按鈕點(diǎn)擊回調(diào)方法
});
個(gè)人博客：有恒則成
