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();
关注下面二维码,订阅更多精彩内容。

分类:
reactnative
标签:
ReactNative
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
2015-11-10 JSON.stringify转换Date不正确的解決方法