React-Native 鬼畜表情包app

来源：互联网发布：淘宝每天二十访客少吗编辑：程序博客网时间：2024/04/27 17:02

QQ群,微信群，各种大神，各种表情，每到半夜，斗图大会，八仙过海，各显神通，良辰日天齐上阵。不服，下载鬼畜表情，参加到战斗中，无奈啊，app做的不是太方便，想起抓包把图片一下都下载下来，想起最近看到RN，正好练练手。

单文件批量抓取

/** * Sample React Native App * https://github.com/hanks-zyh/233333 */'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,  TouchableOpacity,} = React;var AwesomeProject = React.createClass({  getImage: function(tid){    fetch('https://face.ersansan.cn/collection/'+tid)    .then((respose) => respose.text())    .then((responseText) => {          var result = eval('(' + responseText +     ')');          var list = result.picList;          for(var i=0;i<list.length;i++){            var item = list[i];            console.warn(item.link);          }    })    .catch((error) => {      console.warn(error);    }).done;  },  getSunCollection: function(tid){    fetch('https://face.ersansan.cn/collection/'+tid)    .then((respose) => respose.text())    .then((responseText) => {          var result = eval('(' + responseText +     ')');          var list = result.subcollection;          for(var i=0;i<list.length;i++){            var item = list[i];            this.getImage(item.tid);          }    })    .catch((error) => {      console.warn(error);    }).done;  },  _downLoad: function(){      fetch('https://face.ersansan.cn/collection')      .then((respose) => respose.text())      .then((responseText) => {            var result = eval('(' + responseText +     ')');            var list = result.List;            for(var i=0;i<list.length;i++){              var item = list[i];              console.warn(item.tid+item.title);              this.getSunCollection(item.tid);            }      })      .catch((error) => {        console.warn(error);      }).done;  },  render: function() {    return (      <View style={{ flex:1, alignItems:'center', justifyContent:'center'}}>        <TouchableOpacity style={{           backgroundColor:"##234234", height:50, width:80,  alignItems:'center',  justifyContent:'center'         }} onPress={ this._downLoad }>          <Text style={{ fontSize:20,  color:'white' }}>下载</Text>         </TouchableOpacity>      </View>    );  }});var styles = StyleSheet.create({});AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

仿app界面

2333

首页：
外部ScrollView
顶部图片+ListView
给ListView每个item的title设置点击进入专题

专题：
简单的ListView
每个item设置点击进入图片列表

图片列表
还是ListView，每个ListView的item分3个图片
根据Dimensions计算宽高
不够3个的有几个显示几个
每个图片设置点击打开浏览器下载 IntentAndroid.openURL(url);

源码：https://github.com/hanks-zyh/233333

文章来自： http://hanks.xyz

0 0