简述
要实现微信性别选择需要使用两部分的技术:
第一、是自定义弹出框;
第二、单选框控件使用;
效果
实现
一、配置弹出框
弹出框用的是: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();
本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/7816047.html,如需转载请自行联系原作者