为了账号安全,请及时绑定邮箱和手机立即绑定

ReactNative学习笔记--基于Modal的多步弹窗的封装

2017.03.07 16:54 8016浏览

效果

弹窗的封装

此组件只针对有输入框,然后点击确定进行网络请求,伴随菊花转,请求返回的时候在现实请求结果的,如上图显示
和直接显示菊花转,然后显示网络请求结果的。很简单直接上代码。


import React from 'react';
import {
    View,
    Text,
    ActivityIndicator,
    TextInput,
    TouchableOpacity,
    Modal,
} from 'react-native';

import Const from '../../util/const';
import System_styles from '../../util/system_styles';

import {
    Button,
} from '../../common';

export default class AlertView_NetRequest extends React.Component {

    /**
     *  组件介绍:本组件只针对直接有网络请求过程和结果显示的情况,和有输入再进行
     *  网络请求过程 然后显示结果的情况
     *   组件显示:菊花转----- 请求结果 & 输入框 确定 ------ 菊花转-----请求结果
     * */
    static defaultProps = {
        firstItem:{
            title:'',
            subTitle:'',
            cancleBtn:undefined,
            confirmBtn:'确定',
            unit:'',////输入框的单位
            placeHolder:'',///占位符
        },
        secondItem:{
            title:'',
            subTitle:'',
            cancleBtn:undefined,
            confirmBtn:'查看详情',
        },
        firstConfirmBtnClicked:undefined,
        secondConfirmBtnClicked:undefined,
        top:140,
        type:0,///默认直接请求
    };

    constructor(){
        super();
        this.state = {
            text:'',
            visible:false,
            step:0,///请求步骤
        };
    }

    ///显示
    show = ()=>{
        this.setState({
            step:0,
            visible:true
        })
    };

    ///隐藏
    _hide = ()=>{
        this.setState({
            visible:false,
        })
    };

    showNetResult = ()=>{
        const {step} = this.state;
        this.setState({
            step:step+1,
        })

    };

    ///确定按钮点击
    _confirmBtnClicked = ()=>{
        const {firstItem,secondItem,type,firstConfirmBtnClicked,secondConfirmBtnClicked} = this.props;
        const {step}= this.state;

        var btnClicked = type == 0 ? secondConfirmBtnClicked : (step == 0 ? firstConfirmBtnClicked : secondConfirmBtnClicked);

        btnClicked&&btnClicked(this.state.text);
        if(type == 0){
            this._hide();
        }else {
            if(step == 0){
                this.setState({
                    step:step+1,
                })
            }else {
                this._hide();
            }
        }
    }

    render() {

        const {firstItem,secondItem,type} = this.props;

        const {visible,step}= this.state;

        var item = type == 0 ? secondItem : (step == 0 ? firstItem : secondItem);

        let cancleBtnView = item.cancleBtn == undefined ? null : (
            <Button style={{flex:1}}
                    title={item.cancleBtn}
                    onPress={this._hide}
            >
            </Button>
        );

        let bottomBtns = (
            <View style={{height:53,flexDirection:'row'}}>
                {cancleBtnView}
                <View style={{height:53,backgroundColor:System_styles.hei_12,width:1}}/>
                <Button style={{flex:1}}
                        title={item.confirmBtn}
                        onPress={this._confirmBtnClicked}
                >
                </Button>
            </View>
        );

        let textInput = type == 0 ? null :( step == 0 ? (
            <View style={{height:64,paddingLeft:16,paddingRight:16,flexDirection:'row'}}>
                <View style={{flexDirection:'row',height:40,borderRadius:3,backgroundColor:System_styles.hei_12,paddingLeft:10,paddingRight:7,flex:1,alignItems:'center'}}>
                    <TextInput  style={{height:40,flex:7}}
                                placeholder = {item.placeHolder}
                                onChangeText={(text) => this.setState({text})}
                                keyboardType='numeric'
                    >
                    </TextInput>
                    <Text style={[{flex:1},System_styles.getChanggui(15,System_styles.hei_32)]}>
                        {item.unit}
                    </Text>
                </View>
            </View>
        ):null);

        let normalContent = (type == 0&&step == 0)||(type == 1 && step == 1) ? (
            <View
                style={[{justifyContent:'center',
                alignItems:'center',borderRadius:6
                ,backgroundColor:System_styles.white,width:Const.screen_width/3.0,height:Const.screen_width/3.0},this.props.style]}>
                <ActivityIndicator
                    size = 'large'
                    color={System_styles.hei_56}
                />
            </View>
        ):(
            <View
                style={[{justifyContent:'center',
                alignItems:'center',borderRadius:6
                ,backgroundColor:System_styles.white,},this.props.style]}>

                <View style={[{borderTopLeftRadius:3,borderTopRightRadius:3,alignItems:'center',paddingBottom:26,paddingTop:23}]}>
                    <Text style={System_styles.getChanggui(17,System_styles.hei_84)}>
                        {item.title}
                    </Text>
                    <Text style={System_styles.getChanggui(13,System_styles.hei_56)}>
                        {item.subTitle}
                    </Text>
                </View>
                {textInput}
                <View style={{height:1,backgroundColor:System_styles.hei_12,width:Const.screen_width-64}}/>
                {bottomBtns}
            </View>
        );

        return (
            <Modal
                animationType={'fade'}
                transparent={true}
                visible={visible}
            >
                <View
                    style={{flex:1,backgroundColor:'rgba(0,0,0,0.5)',alignItems:'center',paddingHorizontal:32}}
                >
                    {normalContent}
                </View>
            </Modal>

        )
    }
}

使用方法:

导入后直接放到render()里,AlertView_NetRequest,注意使用位置,一定是最上层,同时设置标记 ref={ref=>{this.netRequestAlert=ref}},便于显示组件,开始请求,结果返回的显示

 render() {
        var sub = '最低起购金额'+this.max+'万';
       var firstItem ={
            title:'申请额度',
            subTitle:sub,
            cancleBtn:undefined,
            confirmBtn:'确定',
            unit:'万',////输入框的单位
            placeHolder:'请输入申请金额',///占位符
        };
       var secondItem={
            title:'您的额度申请已提交',
            subTitle:'在额度申请查询中查看审核结果',
            cancleBtn:'取消',
            confirmBtn:'额度申请查询',
       };

        return(
            <View
                style={{flex:1,backgroundColor:'white'}}
            >
                <View style={{flex:1,}}>
                    {this._renderHeader()}
                    {this._renderSalesInfoView()}
                    {this._renderContents()}
                </View>
                <HorizontalButtons
                    style={{borderTopColor:System_styles.hei_12,borderTopWidth:0.5,paddingHorizontal:8}}
                    buttons = {items}
                    callBack={this._bottomBtnClicked}
                />
                <AlertView_NetRequest
                    ref={ref=>{this.netRequestAlert=ref}}
                    style={{marginTop:Const.screen_height/3.0}}
                    firstItem = {firstItem}
                    secondItem = {secondItem}
                    firstConfirmBtnClicked = {this._alertConfirmBtnClicked}
                    secondConfirmBtnClicked = {this._alertConfirmBtnClicked}
                    type = {1}
                >
                </AlertView_NetRequest>
            </View>
        )
    }
1.开始显示
     this.netRequestAlert.show();
2.点击弹出框上的确定按钮,开始网络请求
 _alertConfirmBtnClicked = (text)=>{
     dispatch(ProductListsActions.requestApplyTrustCount(proItem.getIn(['productId']),Const.userInfo.id,text,this._requestCallBak));
    };
3.请求结果返回的时候调用显示结果
            this.netRequestAlert.showNetResult();

注意:上面的组件研究明白了,就能封装简单的弹出窗,前一部分是全部代码,里面有个组件Button记得用自己项目里的按钮组件替换掉。喜欢的请点推荐

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

7人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消