Fork me on GitHub

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

 

posted @ 2017-11-10 18:56  磊哥|www.javacn.site  阅读(4559)  评论(2编辑  收藏  举报