[置顶] 【稀饭】react native 实战系列教程之首页列表UI实现

标签: reactnative实战教程Android
1905人阅读 评论(2) 收藏 举报
分类:

首页设计与实现

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

设计

(图丑,莫见怪~)

主界面的设计如下

主界面设计

首页的设计如下

首页设计

有人可能会觉得,为什么不把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, {Component} from 'react';
import {
    View,
    Text,
    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,r2) => r1!=r2,
            }),
        }
    }

    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),
        });
    }

    //渲染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,
        width:width-20,
        color:'black',
        marginTop:8,
        marginBottom:5,
        textAlign:'center',
    },
    actor:{
        fontSize:10,
        color:'#707070',
        width:width-20,
        textAlign:'center',
    },
    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,
        width:width,
        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解析库,如果你还不知道这是用来干嘛的,你可以先去了解下

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:645874次
    • 积分:4792
    • 等级:
    • 排名:第6305名
    • 原创:106篇
    • 转载:22篇
    • 译文:5篇
    • 评论:345条
    关于我
    博客专栏
    最新评论