React-Native征程（1）

個(gè)人奮斗記錄，激勵(lì)。。。

環(huán)境搭配什么的過了，畢竟比較簡(jiǎn)單

API：

AsyncStorage，一句話描述：－－－－－異步特征 的鍵值對(duì) 存儲(chǔ)系統(tǒng)

直觀印象：app本地?cái)?shù)據(jù)存儲(chǔ)，用于數(shù)據(jù)提交前的，匯總以及整理，（不需要所有數(shù)據(jù)都在服務(wù)端處理），異步特性，實(shí)現(xiàn)本地?cái)?shù)據(jù)異步刷新

含有的可用方法：

1.getItem（key：string，callback：（error，result））：根據(jù)鍵獲取值，結(jié)果在回調(diào)函數(shù)中

2.setItem （key：string，value：string，callback：（error））：設(shè)置鍵值對(duì)

3.mergeItem（ket：string，value：string，callback：（error））：合并現(xiàn)有的值和輸入值，

4.removeitem（key：string，callback：（error））：根據(jù)鍵移出一項(xiàng)

5.getAllKeys（callback：（error））：獲取所有的鍵，比較常用的方法

6.multiRemove（keys,callback:(errors)）:刪除多項(xiàng)，其中keys是字符串?dāng)?shù)組

7.multiSet（keyValuePairs，callback：（errors））：設(shè)置多項(xiàng)，其中keyValuePairs是字符串的二維數(shù)組

8.multiMerge（keyValuePairs，callback:(errors)）:多個(gè)鍵值對(duì)合并

10.clear（callbackL：（error））：清除所有的項(xiàng)目

11.multiGet（keys,callback:(errors，result)）：獲取多想，其中keys是字符串?dāng)?shù)組

案例代碼：購(gòu)物車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: '佳沛新西蘭進(jìn)口獼猴桃',
    desc: '12個(gè)裝',
    price: 99,
    url: 'http://vczero.github.io/ctrip/guo_1.jpg'
  },
  {
    id:'2',
    title: '墨西哥進(jìn)口牛油果',
    desc: '6個(gè)裝',
    price: 59,
    url: 'http://vczero.github.io/ctrip/guo_2.jpg'
  },
  {
    id:'3',
    title: '美國(guó)加州進(jìn)口車?yán)遄?,
    desc: '1000g',
    price: 91.5,
    url: 'http://vczero.github.io/ctrip/guo_3.jpg'
  },
  {
    id:'4',
    title: '新疆特產(chǎn)西梅',
    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'
  }
];
//一般先創(chuàng)建基礎(chǔ)組件，這里是item組件，包含若干要素，數(shù)據(jù)將從父節(jié)點(diǎn)傳遞而來，
//this.props.是從父節(jié)點(diǎn)傳來的值，只讀不可修改，只能在父節(jié)點(diǎn)修改
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函數(shù)作為結(jié)構(gòu)體初始化操作
    return{
      count:0
    };
  },
  componentDidMount: function(){//組件加載函數(shù)，
    var _that = this;
    AsyncStorage.getAllKeys(function(err, keys){//獲取所有鍵，如果出錯(cuò)退出下面的邏輯，錯(cuò)誤處理函數(shù)沒有完善
      if(err){
        //TODO：存儲(chǔ)取數(shù)據(jù)出錯(cuò)
      }
      //將存儲(chǔ)的商品條數(shù)反應(yīng)到按鈕上
      _that.setState({
        count: keys.length
      });
    });
  },
  render: function() {
    var list = [];
    for(var i in Model){
      if(i % 2 === 0){//數(shù)組從0開始，每行開始的鍵為0，2，4，6.....
        var row = (//這里需要說明的是 key＝｛i｝，官網(wǎng)有解釋，跟節(jié)點(diǎn)只有一個(gè)，
//因此每個(gè)子節(jié)點(diǎn)需要有自己的id號(hào)，否則這里會(huì)出現(xiàn)一個(gè)警告??
          <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);//將每組（一對(duì)）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}>去結(jié)算{str}</Text>
      </ScrollView>
    );
  },
  goGouWu: function(){
    this.props.navigator.push({//通過導(dǎo)航組件，在觸發(fā)結(jié)算需求后跳轉(zhuǎn)到結(jié)算頁(yè)面
      component: GouWu,
      title:'購(gòu)物車'
    });
  },
  press:function(data){
    var count = this.state.count;
    count ++;
    //改變數(shù)字狀態(tài)
    this.setState({
      count: count
    });
    //AsyncStorage存儲(chǔ)
    AsyncStorage.setItem('SP-' + this.genId() + '-SP', JSON.stringify(data), function(err){
      if(err){
        //TODO：存儲(chǔ)出錯(cuò)
      }
    });
  },
  //生成隨機(jī)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}>清空購(gòu)物車</Text>
      </ScrollView>
    );
  },
  componentDidMount: function(){
    var _that = this;
    AsyncStorage.getAllKeys(function(err, keys){
      if(err){
        //TODO：存儲(chǔ)取數(shù)據(jù)出錯(cuò)
        //如果發(fā)生錯(cuò)誤，這里直接返回（return）防止進(jìn)入下面的邏輯
      }
      AsyncStorage.multiGet(keys, function(errs, result){
        //TODO：錯(cuò)誤處理
        //得到的結(jié)果是二維數(shù)組
        //result[i][0]表示我們存儲(chǔ)的鍵，result[i][1]表示我們存儲(chǔ)的值
        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('購(gòu)物車已經(jīng)清空');
      }
      //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);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容