首页设计与实现

首先，这章节讲的是首页内容的设计与实现，不包括主界面的设计，因为一开始入手，我希望能立马获取到数据并能展示出来，后面再来搭木积似的一步一步把整体框架做起来。

设计

（图丑，莫见怪~）

主界面的设计如下

首页的设计如下

有人可能会觉得，为什么不把TitleBar抽出来放在主界面，而要单独放在每个页面里。因为，这个跟你把Navigator（页面导航器）放在什么地方有关系，现在先不说为什么，就这么认为吧，不是每个页面都需要TitleBar的，放在各自页面，就可以很好的控制是否需要标题栏，需要时候再添加。

实现

这章节先实现首页部分。可以看到，最新和最热的内容上结构是一致的，所以，先定义一个组件来显示即可。

先来看下项目的目录结构：

现在用的IDE是WebStorm(之前都是用sublime text 3 敲的代码，那个苦啊/(ㄒoㄒ)/~~)。

自定义组件

新建好js/component 文件夹之后，在component文件夹下创建DramaComponent.js文件

初始代码如下：

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

class DramaComponent extends Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <View> <Text> 我是列表内容 </Text> </View> ); } }

然后，我们这个组件是要作为公共组件的，要给别的组件引用，因此，我们需要将它‘暴露’出去，需要做如下处理：

export default class DramaComponent extends Component {
    ...
}

就是在定义class前加上export default

接着，我们在index.android.js使用import引用它：

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

import DramaComponent from './js/component/DramaComponent';

class XiFan extends Component {

  render(){
    return(
        <DramaComponent />
    );
  }
}

AppRegistry.registerComponent('XiFan',() => XiFan);

看下有没有正常被引用，使用命令行cd到项目根目录下，执行命令（如果已经启动并运行过了，模拟器下双击键盘R键，重新加载即可）

react-native run-android

可以看到组件可以被正常使用并显示了。（默认你已经配置好调试环境，已经连接模拟器并设置好IP）

组件UI编写

可以正常被调用之后，我们就开始编写具体的UI层。

这是一个列表，我们优先想到的是用ListView这个控件

export default class DramaComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            movies:new ListView.DataSource({
                rowHasChanged:(r1,r2) => r1!=r2,}),}
    }
    //渲染ListView item view
    _renderMovieView(movie){

    }
    //ListView 拉到底部时调用
    _onEndReached(){

    }

    render() {
        return (
            <ListView
                dataSource = {this.state.movies}
                renderRow = {this._renderMovieView.bind(this)}
                style = {styles.listview}
                initialListSize = {10}
                pageSize = {10}
                onEndReachedThreshold = {5}
                onEndReached = {this._onEndReached.bind(this)}
                enableEmptySections = {true}
                contentContainerStyle = {styles.grid}
            />
        );
    }
}

ListView的几个属性：

dataSource：数据源

renderRow：ListView渲染的每一item view

initialListSize：初始渲染item的个数

pageSize：每次事件循环（每帧）渲染的行数

onEndReachedThreshold：调用onEndReached之前的临界值，单位是像素

onEndReached：当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用

更多属性介绍可以看下文档介绍

dataSource是一个动态数据，会变化，所以使用state来绑定数据。

每一部剧包含：影片名称、标题、主要演员、图片，还有点击item跳转时的详情链接，所以数据结构设计如下：

var dramaItem ={
    name:'',//影片名称
    title:'',//标题
    actor:'',//演员
    pic:'',//图片地址
    url:'',//详情链接
};

接着，我们要将item view绘制出来，_renderMovieView函数实现如下：

//渲染ListView item view
    _renderMovieView(movie){
        return(
            <View style={styles.row} key={movie.url}> <TouchableOpacity onPress={this._onItemPress.bind(this,movie)} activeOpacity={0.8} > <View> <Image source={{uri:movie.pic}} style={styles.thumbnail}> <Text style={styles.title}>{movie.title}</Text> </Image> <Text numberOfLines={1} style={styles.name}>{movie.name}</Text> <Text numberOfLines={1} style={styles.actor}>{movie.actor}</Text> </View> </TouchableOpacity> </View> ); } //item 点击事件 _onItemPress(movie){ console.log(movie); }

这里关于UI如何布局就不详细说了，看着UI效果大家应该都知道怎么写了。这里需要注意的是TouchableOpacity 的onPress方法需要在点击的时候将movie对象传递下去，所以这里会有个组件的函数怎么传参的问题。

这里有两种方法：

• 第一种

  如上面代码所示，在函数后面调用bind，第一个参数是上下文对象，后面就是参数对象数组

onPress={this._onItemPress.bind(this,movie)}

• 第二种

onPress={()=>this._onItemPress(movie)}

一般使用第一种方法，因为很多时候在定义的方法_onItemPress内，会调用this.xxxx，这时候如果你没有使用_onItemPress.bind(this)，将上下文对象传递下去，那么会报错，提示找不到xxxx方法或对象。

最后，我们在组件生命周期componentDidMount方法内，进行模拟数据：

componentDidMount(){
        var dramaItem ={
            name:'原来是美男啊',//影片名称
            title:'第16集中字',//标题
            actor:'张根硕',//演员
            pic:'http://img.y3600.com/d/file/p/2016/08/24/b216e94526fbf2d49f40dc5aaa1897a4.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        };
        var datas = [];
        datas.push(dramaItem);
        this.setState({
            movies:this.state.movies.cloneWithRows(datas),});
    }

这里关键是通过setState进行状态更新，进而刷新页面，要注意的是调用cloneWithRows进行数据填充，datas是个数据集合。关键代码：

this.setState({ movies:this.state.movies.cloneWithRows(datas),});

然后重新刷新（双击RR）

这里只模拟了一条数据（多条数据多次调用datas.push即可），可以看到已经可以正常显示了，点击item也有log输出了（通过android studio查看logcat）

至此，我们已经实现了列表数据UI的编写，如果你运行上面的代码，你会发现少了些样式style，那下面贴下这节的全部代码：

import React,ListView,StyleSheet,TouchableOpacity,Dimensions,Image
} from 'react-native';

export default class DramaComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            movies:new ListView.DataSource({
                rowHasChanged:(r1,}
    }

    componentDidMount(){
        var dramaItem ={
            name:'原来是美男啊',});
    }

    //渲染ListView item view
    _renderMovieView(movie){
        return(
            <View style={styles.row} key={movie.url}> <TouchableOpacity onPress={this._onItemPress.bind(this,movie)} activeOpacity={0.8} > <View> <Image source={{uri:movie.pic}} style={styles.thumbnail}> <Text style={styles.title}>{movie.title}</Text> </Image> <Text numberOfLines={1} style={styles.name}>{movie.name}</Text> <Text numberOfLines={1} style={styles.actor}>{movie.actor}</Text> </View> </TouchableOpacity> </View> ); } _onItemPress(movie){ console.log(movie); } //ListView 拉到底部时调用 _onEndReached(){ console.log('加载下一页'); } render() { return ( <ListView  dataSource = {this.state.movies} renderRow = {this._renderMovieView.bind(this)} style = {styles.listview} initialListSize = {10} pageSize = {10} onEndReachedThreshold = {5} onEndReached = {this._onEndReached.bind(this)} enableEmptySections = {true} contentContainerStyle = {styles.grid} /> ); } } const WIN_WIDTH = Dimensions.get('window').width; var width = WIN_WIDTH/3; var styles = StyleSheet.create({ grid:{ justifyContent: 'flex-start',flexDirection: 'row',flexWrap: 'wrap' },row:{ height:200,width:width,flexDirection:'column',justifyContent:'center',alignItems:'center',paddingTop:10,paddingBottom:10,marginTop:5,marginBottom:5,},thumbnail:{ flex:1,width:width-20,height:140,justifyContent:'flex-end',resizeMode: Image.resizeMode.strech,title:{ fontSize:10,textAlign:'center',color:'white',backgroundColor:'#27272790',name:{ fontSize:12,color:'black',marginTop:8,actor:{ fontSize:10,color:'#707070',listview:{ backgroundColor:'#f5fcff',});

这里可能要提一下，我们使用的是ListView，但是最后效果好像是一个Android中GridView的效果，或者你可能会有疑问react native中如何实现GridView的效果。其实在react native中使用ListView在配合好style就可以实现GridView的效果了，主要样式如下：

grid:{ justifyContent: 'flex-start',flexDirection: 'row',flexWrap: 'wrap' },row:{ height:200,flexDirection:'column',justifyContent:'center',alignItems:'center',paddingTop:10,paddingBottom:10,marginTop:5,marginBottom:5,},

grid是ListView的contentContainerStyle，justifyContent: ‘flex-start’使每个item靠左，flexDirection: ‘row’让item是水平从左往右排列，flexWrap: ‘wrap’是当一行item排列不下时自动换行。row是每个item的style，需要设置好height和width。

总结

本节讲了应用的的整体设计，并实现了列表UI，只是数据还是模拟阶段，主要技术点在于ListView的使用，熟悉dataSource、renderRow、ListView.DataSource、cloneWithRows以及函数的传参问题。下一节，我们在实现真实数据的获取和解析，使用到cheerio这个html解析库，如果你还不知道这是用来干嘛的，你可以先去了解下。