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

首页设计与实现

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

设计

（图丑，莫见怪~）

主界面的设计如下

//图片地址
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）

//图片地址
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解析库，如果你还不知道这是用来干嘛的，你可以先去了解下。