专栏首页王磊的博客react native仿微信性别选择-自定义弹出框

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();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 99%的程序员都在用Lombok,原理竟然这么简单?我也手撸了一个!|建议收藏!!!

    对于 Lombok 我相信大部分人都不陌生,但对于它的实现原理以及缺点却鲜为人知,而本文将会从 Lombok 的原理出发,手撸一个简易版的 Lombok,让你理...

    Java中文社群_老王
  • 简单的小工具wordlight——让VS变量高亮起来

    前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一...

    Java中文社群_老王
  • VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一、IDE的选择:   VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.   WebStorm缺点:性能方面VsC...

    Java中文社群_老王
  • 聊一聊万恶的锁首

    当手持8倍镜的98K都不能在使用程序时干掉万恶的锁首时,内心是十万头羊驼奔跑的场景,那我们就来聊一聊市面上常见的锁首方式。 ① :设置OpenHomePage、...

    FB客服
  • 最近有啥ML比赛能表现自己的优秀?CVPR2018图像压缩大赛

    原作 Michele Covell Root 编译自 谷歌博客 量子位 出品 | 公众号 QbitAI 新的一年来了,想给自己找个难度大的挑战?有哪些问题是有重...

    量子位
  • HTML5学习(一):服务器与浏览器

    因为关机别人就访问不到电脑的信息了。诸如我们常见的error: 404 not found

    雷潮
  • Grid布局简介

    没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

    桃翁
  • MySQL中left join的几个SQL对比

    对于很多同学来说,写SQL时的表关联看起来是一件很简单的事情,知道逻辑,有预期的结果,好像没什么特别要注意的,今天在写一条SQL逻辑的时候,觉得对于left j...

    jeanron100
  • Java Code review 一些原则的原因探讨

    陈黎栋
  • 特殊约束From To

    “A timing exception is needed when the logic behaves in a way that is not ti...

    sea-wind

扫码关注云+社区

领取腾讯云代金券