Fork me on GitHub

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

 

posted @   磊哥|www.javacn.site  阅读(4578)  评论(2编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2015-11-10 JSON.stringify转换Date不正确的解決方法
点击右上角即可分享
微信分享提示