React-Native 鬼畜表情包app

叁歲伎倆 2022-08-19 15:21 106阅读 0赞

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个图片  
根据D`imensions`计算宽高  
不够3个的有几个显示几个  
每个图片设置点击打开浏览器下载 `IntentAndroid.openURL(url);`

源码：[https://github.com/hanks-zyh/233333][https_github.com_hanks-zyh_233333]

> 文章来自： [http://hanks.xyz][http_hanks.xyz]

[2333]: https://github.com/hanks-zyh/233333/raw/master/2333.gif
[https_github.com_hanks-zyh_233333]: https://github.com/hanks-zyh/233333
[http_hanks.xyz]: http://hanks.xyz