从0到1利用React-Native构建百思不得姐(二)

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

如果遇到什么问题可以在评论区回复，或者加QQ群397885169讨论

前言

昨天终于把公司双十二的项目上线了，才有了时间写这第二篇文章，在上一篇中我们将项目的目录结构建好了，今天我们就来讲一下网络请求，首页布局和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 (
            <View style={styles.container}>
                <NavBar
                    title={titleConfig}
                    style={{height:44,borderBottomWidth:1,borderBottomColor:'#dddddd'}}
                />
                <ScrollableTabView
                    renderTabBar={() => <ScrollableTabBar/>}
                    tabBarActiveTextColor='red'
                    tabBarInactiveTextColor='#rgb(67,67,67)'
                    tabBarBackgroundColor='#f7f7f7'

                    style={{height:10}}
                >
                    {
                        this.state.typeArr.map((item, i) => {
                            return (
                                <HomeList key={i} tabLabel={item.title} type={item.type}
                                          navigator={this.props.navigator} {...this.props}/>
                            )
                        })
                    }
                </ScrollableTabView>
            </View>
        );
    }
}
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 (
                <View style={styles.loadMoreStyle}>
                    <Text style={styles.loadMoreTextStyle} >没有更多数据了</Text>
                </View>
            )
        }

        if (!this.state.isLoadingMore){
            return <View style={styles.loadMoreStyle} />
        }
        return(
            <ActivityIndicator
                style={styles.loadMoreStyle}
            />
        )
    }

    // 服务器有没有更多数据
    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(
            <ListItem itemData={rowData}/>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                {
                    this.state.isLoad ?
                        <ListView
                            dataSource={this.state.dataSource}
                            renderRow={this.renderRow}
                            enableEmptySections={true}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={40}
                            renderFooter={this.renderFooter}
                            refreshControl={
                                <RefreshControl
                                    refreshing={this.state.isRefreshing}
                                    onRefresh={this.onRefresh}
                                />
                            }
                        />
                        :
                        <ActivityIndicator
                            style={styles.loadDataStyle}
                        />
                }

            </View>
        );
    }
}

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哦！