react native仿微信性别选择-自定义弹出框

简述

要实现微信性别选择需要使用两部分的技术：

　　第一、是自定义弹出框；

　　第二、单选框控件使用；

效果

实现

一、配置弹出框

　　弹出框用的是：react-native-popup-dialog（Git地址：https://github.com/jacklam718/react-native-popup-dialog）

　　具体配置见Git文档~

二、配置单选框

　　用的是：react-native-elements（Git地址：https://react-native-training.github.io/react-native-elements/API/checkbox/）

　　具体配置见Git文档~

核心代码：

import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';
<PopupDialog
dialogTitle={<DialogTitle title="性别" />}
ref={popupDialog => {
this.popupDialog = popupDialog;
}}
width={240}
height={170}
>
<View>
<View>
<View
style={{
borderBottomWidth: 1,
borderColor: '#eee'
}}
>
<CheckBox
left
checkedIcon="dot-circle-o"
uncheckedIcon="circle-o"
checked
checkedColor={skin.main}
iconRight
title="男                            "
textStyle={{ fontSize: 16 }}
containerStyle={{
backgroundColor: '#fff',
borderWidth: 1,
marginTop: -5,
borderWidth: 0
}}
onPress={() => {
this.popupDialog.dismiss();
}}
/>
</View>
<View>
<CheckBox
left
checkedIcon="dot-circle-o"
uncheckedIcon="circle-o"
checkedColor={skin.main}
iconRight
title="女                            "
textStyle={{ fontSize: 16 }}
containerStyle={{
backgroundColor: '#fff',
borderWidth: 1,
borderWidth: 0
}}
onPress={() => {
this.popupDialog.dismiss();
}}
/>
</View>
</View>
</View>
</PopupDialog>

显示弹出框：

this.popupDialog.show();

隐藏弹出框：

this.popupDialog.dismiss();

react native仿微信性别选择-自定义弹出框相关推荐

仿微信软键盘弹出与隐藏
仿微信软键盘弹出与隐藏,效果图如下: 实现输入框弹出,软键盘弹出,获取焦点,否则失去焦点. 首先在 AndroidManifest 文件的对应 Activity 中加入下面代码: android:wi ...
android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
Qt总结：QMessageBox（原生态弹出框及究极超nice封装自定义弹出框）
一.前言在Qt中经常需要弹出窗口,QMessageBox可以实现此功能,一共有三种窗口,information, question, 和 warning,critical, about分别对应感叹号 ...
OpenLayers标记地图点及点击地图点显示自定义弹出框
css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...
所有网站都通用的自定义弹出框alert
A.所有网站都通用的自定义弹出框.A </body> <script>var Alert = function(data){//没有数据则返回if(!data){return; ...
android弹出框自定义按钮,安卓（kotlin）自定义弹出框
在安卓开发中,我们经常会遇到这种情况,就是可爱的UI们设计了一套属于我们自己风格的弹出框,为了彰显我们自己的风格,使用自动的dialog当然满足不了我们的需求,所以还是得这基础上写出我们自己的提示框, ...
阻止window.onbeforeunload事件的弹出框或自定义弹出框
前引:网上很多关于window.onbeforeunload用来监听页面的意外退出或者关闭事件的用法但都会出现下面的弹出框.为此本博客提供方案使下面弹出框消失,但又能实现自己的相应业务功能. 在使用 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
【Chapter1】微信自带弹出框
文章目录一.简介二.弹出框 1.提示框 1.1 显示提示框 1.2 加载提示框 2.是否选择框 3.多项选择框三.嵌套四.遇到的问题最近用了一周写了一个仿知乎的小程序,将会陆续整理,包括前端 ...

react native仿微信性别选择-自定义弹出框

简述

效果

实现

react native仿微信性别选择-自定义弹出框相关推荐

最新文章

热门文章