react native 数据缓存的保存和获取

React Native 版本执行0.57的规则

开发票页面,刚开始的初衷是完全应用state状态存储,但是后期测试发现,会把错误的信息传递出去,因为输入框发生变化就会把数据保存下来,当点击页面的返回按钮,就会把错误的数据带出去

react native 数据缓存的保存和获取_第1张图片


import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TextInput, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { regExp } from "../../network/RegExp"
import Px2dp from '../../utils/Px2dp';
import LinearGradient from 'react-native-linear-gradient'; //按钮渐变
import * as DataBase from '../../utils/Public'

export default class CreateInvoicing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            invoicingBoxArr: [
                {
                    'name': "不开发票",
                    'invoicetype': "0",
                },
                {
                    'name': "开发票",
                    'invoicetype': '',
                }
            ],
            personCompanyArr: [
                {
                    'name': "个人",
                    'invoicetype': "1",
                },
                {
                    'name': "公司",
                    'invoicetype': "2",
                }
            ],
            invoice: {
                "invoicetype": "0",// 发票类型 0不开 1个人 2公司
                "taitou": "",// 发票taitou
                "shibiehao": "",// 发票识别码 
            },// 发票信息 
            visiable: false, //是否删除缓存
            invoicingIndex: 0,
            personCompanyIndex: 0,
        }
    }
    componentWillMount() {
        // 下单页面传过来的发票信息
        if (this.props.navigation.state.params) {
            this.setState({
                invoice: this.props.navigation.state.params.invoice
            })
            console.log(this.props.navigation.state.params.invoice)
        }
    }
    componentDidMount() {
        //返回数据==渲染发票个人信息
        if (this.state.invoice.invoicetype == "1") {
            this.setState({
                invoicingIndex: 1,
                personCompanyIndex: 0
            })
        }
        else if (this.state.invoice.invoicetype == "2") { //返回数据==渲染发票公司信息
            this.setState({
                invoicingIndex: 1,
                personCompanyIndex: 1
            })
        }
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认(IOS为白底黑字、Android为黑底白字)
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"开具发票"} leftClick={() => {
                    //是否删除缓存
                    if (this.state.visiable) {
                        DataBase.removeItem("invoice");
                        goBack()
                    }
                    else {
                        DataBase.getItem("invoice").then(data => {
                            let newData = data
                            console.log(data)
                            if (data == null) {
                                if (this.state.invoice.invoicetype == "1") {
                                    newData = {
                                        "invoicetype": "1",// 发票类型 0不开 1个人 2公司
                                        "taitou": "个人",// 发票taitou
                                        "shibiehao": "",// 发票识别码 
                                    }
                                }
                                else {
                                    newData = {
                                        "invoicetype": "0",// 发票类型 0不开 1个人 2公司
                                        "taitou": "",// 发票taitou
                                        "shibiehao": "",// 发票识别码 
                                    }
                                }
                            }
                            this.props.navigation.state.params.callback(newData);
                            goBack()
                        })
                    }
                }} />
                <ScrollView>
                    <View style={styles.invoicingBox}>
                        <View style={styles.invoicingBoxTabBox}>
                            {
                                this.state.invoicingBoxArr.map((item, index) => {
                                    return (
                                        <TouchableOpacity key={index}
                                            activeOpacity={0.8}
                                            onPress={() => {
                                                this.setState({
                                                    invoicingIndex: index,
                                                })
                                                //判断是否有缓存
                                                DataBase.getItem("invoice").then(data => {
                                                    console.log(data)
                                                    if (data != null) {
                                                        this.setState({
                                                            visiable: false,
                                                        })
                                                    }
                                                    else {
                                                        this.setState({
                                                            visiable: true,
                                                        })
                                                    }
                                                })
                                            }}
                                            style={[styles.invoicingBoxTab, this.state.invoicingIndex == index ? { borderColor: Colors.red } : null]}>
                                            <Text style={[styles.invoicingBoxTabTxt, this.state.invoicingIndex == index ? { color: Colors.red } : null]}>{item.name}</Text>
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </View>
                        {
                            this.state.invoicingIndex != '0' ?
                                <View>
                                    <View style={styles.invoicingInfo}>
                                        <Text style={styles.invoicingInfoTit}>发票信息</Text>
                                    </View>
                                    <View style={styles.invoicingBoxTabBoxs}>
                                        {
                                            this.state.personCompanyArr.map((ite, i) => {
                                                return (
                                                    <TouchableOpacity
                                                        key={i}
                                                        activeOpacity={0.8}
                                                        onPress={() => {
                                                            this.setState({
                                                                personCompanyIndex: i,
                                                            })
                                                            //判断是否有缓存
                                                            DataBase.getItem("invoice").then(data => {
                                                                console.log(data)
                                                                if (data != null) {
                                                                    this.setState({
                                                                        visiable: false,
                                                                    })
                                                                }
                                                                else {
                                                                    this.setState({
                                                                        visiable: true,
                                                                    })
                                                                }
                                                            })
                                                        }}
                                                        style={[styles.invoicingBoxTabs, this.state.personCompanyIndex == i ? { borderColor: Colors.red } : null]}
                                                    >
                                                        <Text style={[styles.invoicingBoxTabTxts, this.state.personCompanyIndex == i ? { color: Colors.red } : null]}>{ite.name}</Text>
                                                    </TouchableOpacity>
                                                )
                                            })
                                        }
                                    </View>
                                </View> : null
                        }
                        {this.renderInvoiceDom()}
                    </View>
                    <View style={styles.LoginBtnBox}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={() => {
                                //不开发票
                                if (this.state.invoicingIndex == 0) {
                                    DataBase.removeItem("invoice");
                                    this.props.navigation.state.params.callback({
                                        "invoicetype": "0",// 发票类型 0不开 1个人 2公司
                                        "taitou": "",// 发票taitou
                                        "shibiehao": "",// 发票识别码 
                                    });
                                    this.setState({
                                        visiable: true
                                    })
                                    this.props.navigation.goBack();
                                }
                                //个人
                                if (this.state.personCompanyIndex == 0 && this.state.invoicingIndex == 1) {
                                    DataBase.removeItem("invoice");
                                    this.props.navigation.state.params.callback({
                                        "invoicetype": "1",// 发票类型 0不开 1个人 2公司
                                        "taitou": "个人",// 发票taitou
                                        "shibiehao": "",// 发票识别码 
                                    });
                                    this.setState({
                                        visiable: true
                                    })
                                    this.props.navigation.goBack();
                                } //公司
                                else if (this.state.personCompanyIndex == 1 && this.state.invoicingIndex == 1) {
                                    if (!this.state.invoice.taitou) {
                                        ToastShow({ 'text': "请输入发票抬头信息" })
                                    } else if (!regExp.invoiceTitle.test(this.state.invoice.taitou)) {
                                        ToastShow({ "text": '请输入正确的发票抬头' })
                                    } else if (!this.state.invoice.shibiehao) {
                                        ToastShow({ 'text': "请输入纳税人识别号或统一社会信用代码信息" })
                                    } else if (!regExp.identifyNumber.test(this.state.invoice.shibiehao)) {
                                        ToastShow({ "text": '请输入正确的纳税人识别号或统一社会信用代码' })
                                    } else {
                                        let temp = this.state.invoice;
                                        temp.invoicetype = "2";
                                        this.setState({
                                            invoice: temp,
                                        })
                                        DataBase.setItem("invoice", temp);
                                        this.props.navigation.state.params.callback(temp);
                                        this.props.navigation.goBack();
                                    }
                                }
                            }}>
                            <LinearGradient
                                start={{ x: 0, y: 1 }}
                                end={{ x: 1, y: 1 }}
                                colors={['#EF6666', '#EA2424']}
                                locations={[0, 1.0]}
                                style={styles.LoginBtn}>
                                <Text style={styles.LoginBtnTxt}>确定</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        );
    }
    renderInvoiceDom() {
        if (this.state.personCompanyIndex == 0 && this.state.invoicingIndex == 1) {
            return (
                <View style={styles.personCompanyBox}>
                    <Text style={styles.personCompanyTxt}>发票抬头:个人(不可修改)</Text>
                </View>
            )
        } else if (this.state.personCompanyIndex == 1 && this.state.invoicingIndex == 1) {
            return (
                <View style={styles.invoicingInfoinp}>
                    <View style={styles.invoicingInfoinpBox}>
                        <Text style={styles.invoicingInfoinpBoxTit}>发票抬头:</Text>
                        <TextInput
                            style={styles.input}
                            returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                            placeholderTextColor="#999"
                            keyboardType="default"
                            placeholder="请输入发票抬头"
                            maxLength={20}
                            defaultValue={this.state.invoice.taitou == "个人" ? "" : this.state.invoice.taitou}
                            onChangeText={(text) => {
                                let temp = this.state.invoice;
                                temp.taitou = text;
                                this.setState({
                                    invoice: temp
                                })
                            }}
                            underlineColorAndroid={'transparent'}
                            onBlur={() => { this._invoiceTitleBlur() }}
                        />
                    </View>
                    <View style={styles.invoicingInfoinpBox}>
                        <Text style={styles.invoicingInfoinpBoxTit}>识别号:</Text>
                        <TextInput
                            style={styles.input}
                            returnKeyType={"search"}// 键盘确定按钮类型 done/go/next/search/send
                            placeholderTextColor="#999"
                            keyboardType="numeric"
                            placeholder="请输入纳税人识别号或统一社会信用代码"
                            defaultValue={this.state.invoice.shibiehao}
                            onChangeText={(text) => {
                                let temp = this.state.invoice;
                                temp.shibiehao = text;
                                this.setState({
                                    invoice: temp
                                })
                            }}
                            underlineColorAndroid={'transparent'}
                            onBlur={() => { this._identifyNumberBllur() }}
                        />
                    </View>
                </View>
            )
        } else {
            return null
        }
    }
    //发票抬头失去焦点事件
    _invoiceTitleBlur() {
        if (!this.state.invoice.taitou) {
            ToastShow({ 'text': "请输入发票抬头信息" })
        }
        else if (!regExp.invoiceTitle.test(this.state.invoice.taitou)) {
            ToastShow({ "text": '请输入正确的发票抬头' })
        }
        else {
            return true
        }
    }
    //纳税人识别号/统一社会信用代码失去焦点事件
    _identifyNumberBllur() {
        if (!this.state.invoice.shibiehao) {
            ToastShow({ 'text': "请输入纳税人识别号或统一社会信用代码信息" })
        }
        else if (!regExp.identifyNumber.test(this.state.invoice.shibiehao)) {
            ToastShow({ "text": '请输入正确的纳税人识别号或统一社会信用代码' })
        }
        else {
            return true
        }
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    invoicingBoxTabBox: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: Px2dp(30)
    },
    invoicingBox: {
        backgroundColor: Colors.white,
        marginTop: Px2dp(10),
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        minHeight: Px2dp(160)
    },
    invoicingBoxTab: {
        width: Px2dp(160),
        height: Px2dp(36),
        borderWidth: Pixel,
        borderColor: "#e0e0e0",
        borderRadius: Px2dp(4),
        justifyContent: 'center',
        alignItems: 'center'
    },
    invoicingBoxTabTxt: {
        fontSize: Px2dp(14),
        color: Colors.text666
    },
    LoginBtnBox: {
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        marginTop: Px2dp(50),
    },
    LoginBtn: {
        width: Px2dp(314),
        backgroundColor: Colors.red,
        height: Px2dp(44),
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnTxt: {
        fontSize: Px2dp(16),
        color: Colors.white,
    },
    //发票信息
    invoicingInfo: {
        marginTop: Px2dp(30)
    },
    invoicingInfoTit: {
        fontSize: Px2dp(15),
        color: Colors.text333
    },
    invoicingBoxTabBoxs: {
        flexDirection: 'row',
        marginTop: Px2dp(16)
    },
    invoicingBoxTabs: {
        width: Px2dp(80),
        height: Px2dp(36),
        borderWidth: Pixel,
        borderColor: "#e0e0e0",
        borderRadius: Px2dp(2),
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: Px2dp(20)
    },
    invoicingBoxTabTxts: {
        fontSize: Px2dp(14),
        color: Colors.text666
    },
    personCompanyTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333
    },
    invoicingInfoinp: {
        marginTop: Px2dp(30),
        paddingBottom: Px2dp(10)
    },
    personCompanyBox: {
        marginTop: Px2dp(30),
        marginBottom: Px2dp(30)
    },
    invoicingInfoinpBox: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: Px2dp(20)
    },
    invoicingInfoinpBoxTit: {
        fontSize: Px2dp(15),
        color: Colors.text333
    },
    input: {
        fontSize: Px2dp(15),
        flex: 1,
        padding: 0
    }
});

你可能感兴趣的:(React,Native,React编写原生应用)