android自定义华为弹框简书,React-Native 自定义Android原生组件--弹出提示框

深藏阁楼爱情的钟 2022-10-17 13:48 392阅读 0赞

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

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

效果预览：

![9bc79a0c50c9][]

android-confirm.jpg

一、设计布局文件

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

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content"

android:orientation="vertical"

android:background="\#fff"

android:paddingBottom="15dp">

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" />

android:layout\_width="match\_parent"

android:layout\_height="0.5dp"

android:background="\#f18518">

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" />

android:layout\_width="match\_parent"

android:layout\_height="30dp"

android:orientation="horizontal">

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" />

android:layout\_width="10dp"

android:layout\_height="match\_parent"

android:background="\#fff">

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" />

二、添加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("提示信息","标题",()=>\{

//“确认”按钮点击回调方法

\},()=>\{

//“取消”按钮点击回调方法

\});

个人博客：有恒则成

[9bc79a0c50c9]: /images/20221014/4382cb29f223470a8fb962dc3e0c4ab5.png

android自定义华为弹框简书,React-Native 自定义Android原生组件--弹出提示框

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue自定义全局组件-弹框案例

相关 android自定义华为弹框简书,React-Native 自定义Android原生组件--弹出提示框

相关 Android 自定义弹出框

相关 android自定义弹出框样式实现

相关自定义弹出模态框

相关 Bootstrap 自定义弹框

相关 HTML不错的自定义弹出框

相关自定义弹框单选

相关 flutter 自定义弹框

相关自定义弹框