react native仿微信性别选择-自定义弹出框

r囧r小猫 2023-10-17 21:06 82阅读 0赞

### 简述 ###

要实现微信性别选择需要使用两部分的技术：

第一、是自定义弹出框；

第二、单选框控件使用；

### 效果 ###

![172074-20171110184543700-346586697.png][]

### 实现 ###

一、配置弹出框

弹出框用的是：react-native-popup-dialog（Git地址：[https://github.com/jacklam718/react-native-popup-dialog][https_github.com_jacklam718_react-native-popup-dialog]）

具体配置见Git文档~

二、配置单选框

用的是：react-native-elements（Git地址：[https://react-native-training.github.io/react-native-elements/API/checkbox/][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();

[172074-20171110184543700-346586697.png]: https://images2017.cnblogs.com/blog/172074/201711/172074-20171110184543700-346586697.png
[https_github.com_jacklam718_react-native-popup-dialog]: https://github.com/jacklam718/react-native-popup-dialog
[https_react-native-training.github.io_react-native-elements_API_checkbox]: https://react-native-training.github.io/react-native-elements/API/checkbox/