美文网首页
React Native数据存储

React Native数据存储

作者: Alan想去月球 | 来源:发表于2018-04-26 15:42 被阅读0次

1.1 JSON文件的读取

示例如下:

import React, {
    Component
  } from 'react';
  import {
    View,
    StyleSheet,
    Text
  } from 'react-native';
  import PropTypes from 'prop-types';
  let constantData=require('./data/Sample.json');//引入json文件
  let constantDataType=typeof(constantData);//文件类型
  let employeesType=typeof(constantData.employees);//employees结点类型
  let name=constantData.employees[2].FamilyName+constantData.employees[2].givenName;
  let salary=constantData.employees[1].salary;
  let salaryType=typeof(constantData.employees[1].salary);//类型
  export default class JSONRead extends Component < {} > {
    constructor(props){
      super(props);
    this.state = { //状态机变量
        constantDataType:constantDataType,
        employeesType:employeesType,
        name:name,
        salary:salary,
        salaryType,salaryType
    }
}
    render() {
      return (
        <View style={styles.container}>
        <Text style={styles.textStyle}>JSON类型:{this.state.constantDataType}</Text>
        <Text style={styles.textStyle}>员工类型:{this.state.employeesType}</Text>
        <Text style={styles.textStyle}>姓名:{this.state.name}</Text>
        <Text style={styles.textStyle}>salary:{this.state.salary}</Text>
        <Text style={styles.textStyle}>salary类型:{this.state.salaryType}</Text>
        </View>
      );
    }
  }
device-2018-04-26-115544.png

1.2 数据的持久化操作(RN上的sharedPreference与NSUserDefaults)

1.2.1、说明

1、RN不支持调用JS的fs包进行读写操作,它提供的是AsyncStorage API。
2、该API只是一个简单的键值对存储系统。
3、每一个AsyncStorage API都会返回一个JS 的Promise对象。
4、有回调函数。

1.2.2 写入数据与错误捕捉

1、方法原型:static object setItem(key,value);
2、调用该方法可存入数据。
3、可以通过AsyncStorage提供的multiSet来一次存储多组数据。 static object multiSet(aArray)方法。

1.2.3 读取数据

1、调用getItem方法,原型为:static object getItem(aKey)
2、还可以通过调用getAllKeys获取当前存储的所有键,原型:static object getAllKeys([aCallback])
3、还可以通过multiGet得到多个键对应的多个值。
4、AsyncStorage存储数据是无序的。

1.2.4 删除数据

1、函数原型:static object removeItem(aKey)
2、还可以通过调用clear()函数删除所有的数据。
3、还可以通过调用multiRemove删除多个对应的键和值。函数原型:static object multiRemove(aArray)

1.2.5 修改数据

1、提供了两个方法进行该项操作:mergeItem(aKey,aValue)以及multiMerge(aArray)。
2、需要注意的是:这两个方法还不能跨平台使用,建议还是使用写入方法对原来已经存在的键值进行覆盖。

1.2.6 JSON对象的存取

存入:
调用JSON.stringify(json)方法。
读取:调用JSON.parse(newJsonStr)。
注意:在使用parse方法的时候,传入的字符串必须严格遵守JSON语法,尾部的逗号是 不允许出现的。

例えば:
AsyncStorage.setItem('name','浙江工业大学');//此为标准使用方法,但无法检测该存储过程何时结束是否成功
      //下面使用Promise机制
      AsyncStorage.setItem('name','浙江大学').then(()=>{//使用Promise机制
        //TODO:在数据保存后调用,但这种方法不能阻止出现错误红屏的出现
      }).catch((error)=>{//操作失败调用
          console.log('error:'+error.message);
      });

相关文章

网友评论

      本文标题:React Native数据存储

      本文链接:https://www.haomeiwen.com/subject/kdeplftx.html