大数据

使用React-Native写百思不得姐(二)

如果感觉我写的不错,关注我,给个star哦!项目地址

前言

昨天终于把公司双十二的项目上线了,才有了时间写这第二篇文章,在上一篇中我们将项目的目录结构建好了,今天我们就来讲一下网络请求,首页布局和cell头部和尾部的布局。

网络

俗话说:兵马未动,粮草先行。子曰:”工欲善其事,必先利其器“。一款App如果没有数据,那只能是一个壳子,所以我们就先讲一下网络请求和请求封装。
在第一篇中我说了,做百思不得姐最重要的一点就是有接口,我在做之前搜到了易源提供了百思不得姐的接口,第一眼看到的时候是很惊喜的,但真的调用过就会发现,其中有好大的坑,让我放弃它最主要的一点就是,调用图片的时候,并没有提供图片的宽度和高度!!!在百思不得姐中是有长图,动图和普通图片之分的,如果没有返回图片的宽高,那图片的布局就只能定死,页面是很难看的,特别是长图的时候。
如果在我的项目中有些接口数据不清楚的话,也可以对着易源提供的百思不得姐接口来看一下接口详情。
最终的解决办法就是找到了iOS大神,小码哥老大李明杰曾讲过的百思不得姐的接口。

网络封装

因为是抓来的接口,所以我只封装了get请求的部分,以后可能会有页面用到post。
request.js

const Request = {
    get:(url, successCallBack , failCallBack) =>{
        console.log(url);
        return fetch(url)
            .then((response) => response.json())
            .then((response) => {
                successCallBack(response);
            })
            .catch ((error) => {
                failCallBack(error);
            });
    }
};

module.exports = Request;

网络请求当然最好是把网址什么的拆出去啦!因为暂时只用到首页,其他页面就没有加在上面咯。
config.js

const Config = {
    api:{
        homeList:'http://api.budejie.com/api/api_open.php?a=list&c=data',
    },
};


module.exports = Config;

首页

如果用过百思不得姐就会知道,它的首页是一个不可滚动的类新闻应用。但为了省事,我在这里使用了一个三方来实现了可以左右滚动的首页。

首页.png

homeContainer.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

import NavBar from 'react-native-navbar';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';
import HomeList from './homeList';

export default class homeContainer extends Component {
    constructor(props){
        super(props);
        this.state = {
            typeArr : [
                {'title':'全部', 'type':'1',},
                {'title':'视频', 'type':'41',},
                {'title':'图片', 'type':'10',},
                {'title':'段子', 'type':'29',},
                {'title':'声音 ', 'type':'31',},
            ],
        }
    }
    render() {
        let titleConfig = {
            title: '百思不得姐',
            style: {color:'red',fontSize:20,fontWeight:'600'}
        };
        return (
            
                
                 }
                    tabBarActiveTextColor='red'
                    tabBarInactiveTextColor='#rgb(67,67,67)'
                    tabBarBackgroundColor='#f7f7f7'

                    style={{height:10}}
                >
                    {
                        this.state.typeArr.map((item, i) => {
                            return (
                                
                            )
                        })
                    }
                
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

首页详情

首页的左右滚动效果已经实现了,那么就要开始展示具体内容了

首页列表.png

homeList.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    InteractionManager,
    ActivityIndicator,
    RefreshControl
} from 'react-native';

import Config from '../../common/config';
import Request from '../../common/request';

import ListItem from './component/listItem';

let cacheResults = {
    items:[],
    allPage:0,
    maxId:'',
};
export default class homeList extends Component {

    constructor(props){
        super(props);
        let dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
        this.state = {
            dataSource : dataSource,
            isRefreshing : false,
            isLoad: false,
            isLoadingMore:false,
            maxId: '',
        };
        this.renderRow = this.renderRow.bind(this);
        this.onRefresh = this.onRefresh.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
        this.renderFooter = this.renderFooter.bind(this);
    }

    renderFooter(){

        if (!this.isMore()){
            console.log('1');
            return (
                
                    没有更多数据了
                
            )
        }

        if (!this.state.isLoadingMore){
            return 
        }
        return(
            
        )
    }

    // 服务器有没有更多数据
    isMore(){
        // 全部count等于整体count,那就说明结束了
        return cacheResults.items.count !== 2000;
    }

    // 加载更多数据
    onEndReached(){
        if (!this.isMore() || this.state.isLoadingMore ){
            return;
        }

        console.log(this.state.maxId);
        this.loadData(this.state.maxId);
    }

    // 下拉刷新
    onRefresh(){
        console.log(this.state.maxId);
        this.loadData(0);
    }
    // 跳转页面
    pushPage(rowData){
        let {navigator} = this.props;
        if (navigator) {
            InteractionManager.runAfterInteractions(()=> {
                navigator.push({
                    component: NewsDetail,
                    passProps:{
                        link:rowData.link,
                    }
                })
            });
        }
    }

    componentDidMount() {
        this.loadData(0);
    }

    loadData(maxtime){
        if (maxtime !== 0){
            this.setState({
                isLoadingMore:true
            });
        }else {
            this.setState({
                isRefreshing :true
            });
        }

        Request.get(Config.api.homeList + '&type='+ this.props.type +'&maxtime=' + maxtime ,(data)=>{
            console.log(data);
            let items = cacheResults.items.slice();
            let contentlist = data.list;

            if (maxtime !== 0){
                items = items.concat(contentlist);
                cacheResults.items = items;

            } else {
                items = contentlist;
                cacheResults.items = items;
            }
            cacheResults.allPage = data.info.page;

            this.setState({
                maxId:data.info.maxid
            });

            setTimeout(()=>{
                if (maxtime !== 0){
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(items),
                        isRefreshing:false,
                        isLoad:true,
                        isLoadingMore:false,
                    });
                } else {
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(items),
                        isLoad :true,
                        isRefreshing:false,
                        isLoadingMore:false,
                    });
                }
            },0);
        },(error)=>{
            console.log(error);
        });
    }
    renderRow(rowData){
        return(
            
        )
    }
    render() {
        return (
            
                {
                    this.state.isLoad ?
                        
                            }
                        />
                        :
                        
                }

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    loadDataStyle: {
        marginVertical:20
    },
    loadMoreStyle:{
        marginVertical:20
    },
});

自定义Item

当前的页面中我只是简单的展示了文字,而真正的图片,头像等我都没有展示出来,接下来就是展示环节了。

导入组件

react-native-scrollable-tab-view 这个就是我们用来创建顶部滚动的控件啦!它还可以放在底部实现类似于安卓版微信那种的滚动tabBar;

吐槽

在列表页中,我将上拉刷新和下拉加载都放在了一起,并没有使用Redux。为什么呢?因为,我之前在上一个项目中做实验的时候发现,这种左右滚动的页面,如果用Actions来管理网络,页面的数组不好清空,我弄了大半天最后找了个折中的方式,将网络请求放在Actions里面,将数据获取又放回了List列表页里面,我感觉如果那样写真的是不如一个页面全都实现了,逻辑上也不是那么不清晰。
当然,我会在之后的一些页面中使用Redux,Redux并不是每个页面都用才好!

我在使用react-native-scrollable-tab-view时想改变底部滚动条的颜色,发现调用它提供的方法竟然改不了!一起之下,我就杀进了这个库里面,直接改了部分源码。

总结

现在用的这个接口用起来是有一点问题的。我在上拉加载更多的时候卡住了好久。
如果在使用中遇到什么问题,欢迎私信和评论哦!
如果喜欢我的文章,关注我,给个star哦!