ReactNative学习笔记--基于Modal的多步弹窗的封装_如何封装modal reactnative-优快云博客

本文介绍了一个React Native中的网络请求弹窗组件封装方法，该组件能够处理带有输入框的弹窗，并在用户确认后发起网络请求，在请求过程中显示加载指示器，请求完成后展示结果。

效果

弹窗的封装

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



 
  
   
    [javascript] 
    view plain
     copy
    
     
   
  
  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}}，便于显示组件，开始请求，结果返回的显示

 
  
   
    [javascript] 
    view plain
     copy
    
     
   
  
  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记得用自己项目里的按钮组件替换掉。喜欢的请点

链接：http://www.imooc.com/article/16793