React-Native征程（1）

个人奋斗记录，激励。。。

环境搭配什么的过了，毕竟比较简单

API：

AsyncStorage，一句话描述：－－－－－异步特征 的键值对 存储系统

直观印象：app本地数据存储，用于数据提交前的，汇总以及整理，（不需要所有数据都在服务端处理），异步特性，实现本地数据异步刷新

含有的可用方法：

1.getItem（key：string，callback：（error，result））：根据键获取值，结果在回调函数中

2.setItem （key：string，value：string，callback：（error））：设置键值对

3.mergeItem（ket：string，value：string，callback：（error））：合并现有的值和输入值，

4.removeitem（key：string，callback：（error））：根据键移出一项

5.getAllKeys（callback：（error））：获取所有的键，比较常用的方法

6.multiRemove（keys,callback:(errors)）:删除多项，其中keys是字符串数组

7.multiSet（keyValuePairs，callback：（errors））：设置多项，其中keyValuePairs是字符串的二维数组

8.multiMerge（keyValuePairs，callback:(errors)）:多个键值对合并

10.clear（callbackL：（error））：清除所有的项目

11.multiGet（keys,callback:(errors，result)）：获取多想，其中keys是字符串数组

案例代码：购物车demo

5D20F5DA-8814-453B-A259-B1B22B261C8F.png A2E3E91F-444E-42A8-B23F-4739B92BBC37.png

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image,

  NavigatorIOS,

  ScrollView,

  AsyncStorage,

  TouchableOpacity,

} from 'react-native';

var Model = [
  {
    id: '1',
    title: '佳沛新西兰进口猕猴桃',
    desc: '12个装',
    price: 99,
    url: 'http://vczero.github.io/ctrip/guo_1.jpg'
  },
  {
    id:'2',
    title: '墨西哥进口牛油果',
    desc: '6个装',
    price: 59,
    url: 'http://vczero.github.io/ctrip/guo_2.jpg'
  },
  {
    id:'3',
    title: '美国加州进口车厘子',
    desc: '1000g',
    price: 91.5,
    url: 'http://vczero.github.io/ctrip/guo_3.jpg'
  },
  {
    id:'4',
    title: '新疆特产西梅',
    desc: '1000g',
    price: 69,
    url: 'http://vczero.github.io/ctrip/guo_4.jpg'
  },
  {
    id:'5',
    title: '陕西大荔冬枣',
    desc: '2000g',
    price: 59.9,
    url: 'http://vczero.github.io/ctrip/guo_5.jpg'
  },
  {
    id:'6',
    title: '南非红心西柚',
    desc: '2500g',
    price: 29.9,
    url: 'http://vczero.github.io/ctrip/guo_6.jpg'
  }
];
//一般先创建基础组件，这里是item组件，包含若干要素，数据将从父节点传递而来，
//this.props.是从父节点传来的值，只读不可修改，只能在父节点修改
var Item = React.createClass({
  render: function(){
    return(
      <View style={styles.item}>
        <TouchableOpacity onPress={this.props.press}>
          <Image
              resizeMode="contain"
              style={styles.img}
              source={{uri:this.props.url}}>
            <Text numberOfLines={1} style={styles.item_text}>{this.props.title}</Text>
          </Image>
        </TouchableOpacity>
      </View>
    );
  }
});
//重要的列表组件，将item组件作为基本元素，按照逢单装填一排的样式，加载item，
var List = React.createClass({
  getInitialState: function(){//getInitialState函数作为结构体初始化操作
    return{
      count:0
    };
  },
  componentDidMount: function(){//组件加载函数，
    var _that = this;
    AsyncStorage.getAllKeys(function(err, keys){//获取所有键，如果出错退出下面的逻辑，错误处理函数没有完善
      if(err){
        //TODO：存储取数据出错
      }
      //将存储的商品条数反应到按钮上
      _that.setState({
        count: keys.length
      });
    });
  },
  render: function() {
    var list = [];
    for(var i in Model){
      if(i % 2 === 0){//数组从0开始，每行开始的键为0，2，4，6.....
        var row = (//这里需要说明的是 key＝｛i｝，官网有解释，跟节点只有一个，
//因此每个子节点需要有自己的id号，否则这里会出现一个警告⚠️
          <View key={i} style={styles.row}>
            <Item
              url={Model[i].url}
              title={Model[i].title}
              press={this.press.bind(this, Model[i])}></Item>
            <Item
              url={Model[parseInt(i)+1].url}
              title={Model[parseInt(i)+1].title}
              press={this.press.bind(this, Model[parseInt(i)+1])}></Item>
          </View>);
        list.push(row);//将每组（一对）item，压栈row中，
      }
    }

    var count = this.state.count;
    var str = null;
    if(count){
      str = '，共'+ count + '件商品';
    }
    return (
      <ScrollView style={{marginTop:10}}>
        {list}
        <Text onPress={this.goGouWu} style={styles.btn}>去结算{str}</Text>
      </ScrollView>
    );
  },
  goGouWu: function(){
    this.props.navigator.push({//通过导航组件，在触发结算需求后跳转到结算页面
      component: GouWu,
      title:'购物车'
    });
  },
  press:function(data){
    var count = this.state.count;
    count ++;
    //改变数字状态
    this.setState({
      count: count
    });
    //AsyncStorage存储
    AsyncStorage.setItem('SP-' + this.genId() + '-SP', JSON.stringify(data), function(err){
      if(err){
        //TODO：存储出错
      }
    });
  },
  //生成随机ID：GUID
  genId:function(){
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      }).toUpperCase();
  }
});

var GouWu = React.createClass({
  getInitialState: function(){
    return {
      data: [],
      price: 0
    };
  },
  render: function(){
    var data = this.state.data;
    var price = this.state.price;
    var list = [];
    for(var i in data){
      price += parseFloat(data[i].price);
      list.push(
        <View key={i} style={[styles.row, styles.list_item]}>
          <Text style={styles.list_item_desc}>
            {data[i].title}
            {data[i].desc}
          </Text>
          <Text style={styles.list_item_price}>¥{data[i].price}</Text>
        </View>
      );
    }
    var str = null;
    if(price){
      str = '，共' + price.toFixed(1) + '元';
    }
    return(
      <ScrollView style={{marginTop:10}}>
        {list}
        <Text style={styles.btn}>支付{str}</Text>
        <Text style={styles.clear} onPress={this.clearStorage}>清空购物车</Text>
      </ScrollView>
    );
  },
  componentDidMount: function(){
    var _that = this;
    AsyncStorage.getAllKeys(function(err, keys){
      if(err){
        //TODO：存储取数据出错
        //如果发生错误，这里直接返回（return）防止进入下面的逻辑
      }
      AsyncStorage.multiGet(keys, function(errs, result){
        //TODO：错误处理
        //得到的结果是二维数组
        //result[i][0]表示我们存储的键，result[i][1]表示我们存储的值
        var arr = [];
        for(var i in result){
          arr.push(JSON.parse(result[i][1]));
        }
        _that.setState({
          data: arr
        });
      });

    });
  },
  clearStorage: function(){
    var _that = this;
    AsyncStorage.clear(function(err){
      if(!err){
        _that.setState({
          data:[],
          price: 0
        });
        alert('购物车已经清空');
      }
      //TODO:ERR
    });
  }
});
var Reactest = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={
          {
            component: List,
            title: '水果列表'
          }
        }/>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  row:{
    flexDirection: 'row',
    marginBottom: 10,
  },
  item:{
    flex:1,
    marginLeft:5,
    borderWidth:1,
    borderColor:'#ddd',
    marginRight:5,
    height:100,
  },
  img:{
    flex:1,
    backgroundColor: 'transparent'
  },
  item_text:{
    backgroundColor: '#000',
    opacity: 0.7,
    color:'#fff',
    height:25,
    lineHeight:18,
    textAlign:'center',
    marginTop:74
  },
  btn:{
    backgroundColor:'#FF7200',
    height:33,
    textAlign:'center',
    color:'#fff',
    marginLeft:10,
    marginRight:10,
    lineHeight:24,
    marginTop:40,
    fontSize:18,
  },
  list_item:{
    marginLeft:5,
    marginRight:5,
    padding:5,
    borderWidth:1,
    height:30,
    borderRadius:3,
    borderColor:'#ddd'
  },
  list_item_desc:{
    flex:2,
    fontSize:15
  },
  list_item_price:{
    flex:1,
    textAlign:'right',
    fontSize:15
  },
  clear:{
    marginTop:10,
    backgroundColor:'#FFF',
    color:'#000',
    borderWidth:1,
    borderColor:'#ddd',
    marginLeft:10,
    marginRight:10,
    lineHeight:24,
    height:33,
    fontSize:18,
    textAlign:'center',
  }
});


AppRegistry.registerComponent('Reactest', () => Reactest);