简述
要实现微信性别选择需要使用两部分的技术:
第一、是自定义弹出框;
第二、单选框控件使用;
效果
实现
一、配置弹出框
弹出框用的是: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();
如果本文对你有所帮助,请打赏——1元就足够感动我:)
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号:
作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。