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();
react native仿微信性别选择-自定义弹出框
原文：http://www.cnblogs.com/vipstone/p/7816047.html
