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();