React-native 文章点赞、取消赞

点赞操作：客户端只处理点赞的状态和取消点赞的状态，具体就是点赞后图标变红，下面的点赞数+1，取消点赞时，图标去红，点赞数-1，至于有多少个点赞数，每次请求数据的时候每次都要从后台拉取，具体就是发送post请求。

1.Storage接口的封装：

import React, { Component } from 'react';
import {
  AsyncStorage
} from 'react-native';

// 一般更新的操作其实就是对存储的操作进行了业务封装，并没有固定性，这里只处理“string”类型的key值。

export default class Storage extends Component {
    constructor(props){
        super(props);
        this.state = {}
    }

    // 增
    static save(key,value) {
        try {
            return AsyncStorage.setItem(key, JSON.stringify(value), ()=>{
                console.log("save success with key:value => ",key, value);
            });
        } catch(e) {
            console.log(e);
        }
    }

    // 删
    static remove(key) {
        try {
            return AsyncStorage.removeItem(key, ()=>{
                console.log("remove value for key: ",key);
            });
        } catch(e) {
            console.log(e);
        }
    }

    // 查
    static getValueForKey(key) {
        try {
            return AsyncStorage.getItem(key, ()=>{
                console.log("trying to get value with key :", key);
            }).then((value)=>{
                return JSON.parse(value);
            },
            (e) => {
                console.log(e);
            });
        } catch(e) {
            console.log(e);
        }
    }

    // 取消点赞
    static update(key,value){
        try {
            return AsyncStorage.getItem(key,()=>{

            }).then((item) => {
                let arry = JSON.parse(item);
                let index = arry.indexOf(value);

                if (index > -1) {
                  arry.splice(index, 1);
                }

                return AsyncStorage.setItem(key, JSON.stringify(arry), ()=>{
                    console.log("update success with key:value => ",key, arry);
                });
            })
        } catch(e){

        }
    }

    render() {
       return null;
    }
}

2.进入点赞页时要判断本篇文章是否已经点过赞

componentDidMount() {
    // 获取本地存储记录
    Storage.getValueForKey('user_like_history')
    .then(historyLikes => {
      this.historyLikes = historyLikes ? historyLikes : [];
      if(this.historyLikes.includes(this.props.title)){

        this.setState({
          liked:true
        })
        
      }
    }).catch(err => {
      console.log(err)
    })
  }

this.historyLikes是在constructor（）方法中定义的：

constructor(props){
    super(props);
    this.state = {
      liked:false,
      // 点赞数，由父组件传过来
      likesNum:this.props.likes
    }
    // 存储点赞数据
    this.historyLikes = [];

  }

3.点赞和取消赞的操作

likeArticle(title){
    if(this.state.liked){
      this.setState({
        liked:false,
        likesNum:this.state.likesNum-1
      })
      // 取消点赞
      Storage.update('user_like_history',title);

    }else{
      // 点赞
      this.historyLikes.push(title);

      Storage.save('user_like_history',this.historyLikes);

      this.setState({
        liked:true,
        likesNum:this.state.likesNum+1
      });
    }

  }

这样基本实现了点赞、取消赞的功能，补充一下，点赞图标高亮切换的时候，兼容性写法：

const img_arr = [require('../img/like_gray.png'),require('../img/like_red.png')];

...

<Image source={this.state.liked ? img_arr[1] : img_arr[0]} style={{width:40,height:40}} />

效果图：

like.gif