2017-07-21 09:36:35 qq_33563147 阅读数 578
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁
let storage = new Storage({
    // 最大容量,默认值1000条数据循环存储
    size: 500,
    // 如果不指定则数据只会保存在内存中,重启后即丢失
    storageBackend: AsyncStorage,
    // 数据过期时间,默认一整天(1000 * 3600 * 24 毫秒),设为null则永不过期
    defaultExpires: null,
    // 读写时在内存中缓存数据。默认启用。
    enableCache: true,
});

export function _cache(keys, value) {
    //缓存
    storage.save({
        key: keys, 
        data: value,  //要缓存的数据
        expires: 1000 * 3600
    });
}
//缓存
_cache('ListPictureData', this._ListPicturesData);
//key //value
//删除缓存
export function _deleteCache(keys) {
    storage.clearMapForKey(keys);
}

//获取缓存
storage.load({
    key: 'ListPictureData',
    autoSync: true,
    syncInBackground: false,
}).then(ret => {
    this._ListPicturesData = ret;
    //初始化渲染
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this._ListPicturesData),
    });
}).catch(err => {
  
});
//this._ListPicturesData === rowData



git 原始缓存介绍地址 https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
2018-06-14 16:32:10 potato512 阅读数 1630
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


react-native中主要使用AsyncStorage进行数据缓存操作,其实现原理是key-value的形式。

主要功能有:保存(修改)、删除(删除指定值,删除所有值)、读取。

效果图


代码示例

import React from 'react';
import {View, Text, TouchableOpacity, Alert, AsyncStorage, StyleSheet} from 'react-native';

let message1 = "devZhang is an iOS developer.";
let message2 = "devZhang comes from GuangDong.";

export default class DataStoragePage extends React.Component {
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.text}>数据缓存功能</Text>
        <TouchableOpacity style={styles.text} onPress={saveData}>
          <Text>保存数据</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.text} onPress={readData}>
          <Text>读取数据</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.text} onPress={deleteData}>
          <Text>删除数据</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.text} onPress={modifyData}>
          <Text>修改数据</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.text} onPress={deleteAllData}>
          <Text>删除所有数据</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const saveData = () => {
  AsyncStorage.setItem('keyMessage', JSON.stringify(message1), (error) => {
    let value = "保存数据成功:"
    if (error) {
      value = "保存数据失败:"
    }
    Alert.alert(value + message1)
  });
};

const readData = async () => {
  // 方法1
  // try {
  //   let result = await AsyncStorage.getItem("keyMessage")
  //   Alert.alert("读取成功:" + result)
  // } catch(error) {
  //   Alert.alert("读取失败:" + error)
  // }

  // 方法2
  AsyncStorage.getItem('keyMessage').then(result => {
    Alert.alert("读取成功:" + result)
  }).catch(error => {
    Alert.alert("读取失败:" + error)
  })

  // 方法3
  // AsyncStorage.getItem('keyMessage', (error, result) => {
  //   let value = "读取数据成功:"
  //   let obj = JSON.parse(result);
  //   if (error) {
  //     value = "读取数据失败:"
  //   }
  //   Alert.alert(value + obj)
  // });
};

const deleteData = () => {
  AsyncStorage.removeItem('keyMessage', (error) => {
    let value = "删除数据成功:"
    if (error) {
      value = "删除数据失败:"
    }
    Alert.alert(value + error)
  });
};

const modifyData = () => {
  AsyncStorage.setItem('keyMessage', JSON.stringify(message2), (error) => {
    let value = "修改数据成功:"
    if (error) {
      value = "修改数据失败:"
    }
    Alert.alert(value + message2)
  });
};

const deleteAllData = () => {
  AsyncStorage.clear((error) => {
    let value = "删除所有数据成功:"
    if (error) {
      value = "删除所有数据失败:"
    }
    Alert.alert(value + error)
  });
};

const styles = StyleSheet.create({
    container: {
      display:"flex",
      flexDirection:"column",
      backgroundColor: 'white',
      alignItems: 'center',
    },
    text: {
      marginTop:10,
      justifyContent:"center",
      alignItems:'center',
      backgroundColor:'red',
      fontSize:20,
      color:"black",
      height:40,
    },
});


2019-03-03 11:17:18 kingrome2017 阅读数 1043
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

React Native 版本执行0.57的规则

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

在这里插入图片描述


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
    }
});
2019-04-22 17:15:47 luyu13141314 阅读数 254
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

1、安装react-native-http-cache

npm install react-native-http-cache --save

2、Linking Libraries

react-native link react-native-http-cache

执行这个命令之后,Android和iOS项目都会把库链接进去。
link 成功.png

(PS: 如果该命令添加失败的话,需要自己在Xcode或者Android Studio 手动添加。)

3、分别配置Android平台和iOS平台

我也是按照github的文档配置的。

3.1 Android

把项目里面的android目录拖进Android Studio

3.1.1、修改MainApplication.java文件

image.png

3.1.2、Android 修改 HttpCacheModule.java文件

(目录为node_modules>react-native-http-cache>android>src>main>java>cn>reactnative>httpcache>HttpCacheModule.java)

//将69改成:
FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();
/80行改成:
FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();

如果不修改以上2个方法,会显示如下报错:
image.png

3.2、iOS

把项目里面的ios目录拖进Xcode

ios修改.png

4、在react native 项目使用react-native-http-cache

import * as CacheManager from 'react-native-http-cache';

我把CacheManager打印了一下,可以看到它有这些方法:

image.png

以下方法返回的是一个 promise 对象

方法 说明
CacheManager.clearCache() 清除缓存
CacheManager.clearHttpCache() 清除网络缓存
CacheManager.clearImageCache() 清除图片缓存
CacheManager.getCacheSize() 返回网络缓存大小和图片缓存大小
CacheManager.getImageCacheSize() 获取图片缓存
CacheManager.getHttpCacheSize() 获取网络缓存
    //获取缓存
    getCache(){
        CacheManager.getCacheSize().then(res=>{
            let cacheSize = Math.round((res / 1024 / 1024) * 100) / 100 + 'M';
            this.setState({
                cacheSize
            })
        },err=>{
            console.log(err)
        })
    }
    //清除缓存
    clearCache(){
        CacheManager.clearCache();
        this.setState({
            cacheSize: '0M'
        })
    }

经测试,清楚缓存之后,还是会有0.15M 。为了界面好看点,我在上面的代码中直接设置清除缓存后为0M了。

image.png

2020-01-12 17:42:07 u011072139 阅读数 18
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

1.安装依赖

npm install rn-fetch-blob --save
npm install react-native-rn-cacheimage --save

2.导入

import {CacheHelper, AnimatedCacheImage} from 'react-native-rn-cacheimage';

3.使用

<AnimatedCacheImage
    source={{
      uri: 'picUrl',
    }}
    defaultSource={默认图片url}
    style={{width: 500, height: 700}}
/>

4.获取缓存大小

_getSize = async () => {
    try {
      const value = await CacheHelper.getCacheSizeFormat();
    } catch (error) {
      // Error retrieving data
    }
  };

5.清除缓存

CacheHelper.clearCache();

react-native缓存数据

阅读数 304

没有更多推荐了,返回首页