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

Z时代
2024-01-10
分类：综合

react

简述

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

　　第一、是自定义弹出框；

　　第二、单选框控件使用；

效果

实现

一、配置弹出框

　　弹出框用的是：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>