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

来源：互联网发布：php抓取网页ajax 编辑：程序博客网时间：2024/05/16 17:51

效果

弹窗的封装

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

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

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

0 0