开发环境配置
页面渲染
- 组件的渲染需要在自定义
class 中进行,每个自定义视图class中都包含一个render()方法,我们需要给render()方法返回一个自定义组件,由其进行将组件渲染:
class MyView extends Component {
render(){
return(
<ScrollView>
<Text >这里显示文字</Text>
</ScrollView>
);
}
}
实现一个ListView以及下拉刷新
class HomeView extends Component {
constructor(props){
super(props);
this.state = {
dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
loaded:false,
dataArray:new Array(),
date:0,
isRefreshing:false,
}
}
//渲染组件
render() {
return(
<ListView
style={{flex:1}}
dataSource={this.state.dataSource}
renderRow={model=>this.renderRow(model)}
onEndReached={() => this.fetchData(this.state.date)}
enableEmptySections={true}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => this.refreshData()}
/>
}
/>
);
}
//组件加载完毕,请求网络数据
componentDidMount() {
this.fetchData(0);
}
//开启网络请求
fetchData(date) {
var url;
if (date === 0) {
url = "http://news-at.zhihu.com/api/4/news/latest";
}else{
url = "http://news-at.zhihu.com/api/4/news/before/" + date;
}
fetch(url)
.then((responseData) => responseData.json())
.then((jsonString) => {
this.setState({
dataArray:this.state.dataArray.concat(jsonString.stories),
dataSource:this.state.dataSource.cloneWithRows(this.state.dataArray),
date:jsonString.date,
loaded:true,
isRefreshing:false,
})
})
.done()
}
//下拉刷新数据
refreshData() {
this.state = {
date:0,
dataArray:new Array(),
isRefreshing:true,
loaded:false,
dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
};
this.fetchData(0);
}
//返回ListView 的cell
renderRow(model){
return(
<TouchableOpacity style={styles.container} onPress={() => this.didSelectedRow(model)}>
<Image source={{uri:model.images[0]}} style={styles.imageStyle}/>
<Text style={styles.titleStyle}>{model.title}</Text>
</TouchableOpacity>
);
}
//ListView选中某一行之后
didSelectedRow(model){
this.props.navigator.push({
title:model.title,
component:HomeDetailView,
passProps:{'newsID':model.id},
})
}
}
var styles = StyleSheet.create ({
container:{
flex:1,
padding:8,
height:80,
flexDirection:'row',
alignItems:'center',
justifyContent:'flex-start',
borderBottomColor:'gray',
borderBottomWidth:0.4,
},
imageStyle:{
width:100,
height:70,
},
titleStyle:{
margin:6,
flex:1,
fontSize:15,
}
})
- 视图渲染之前会先执行
class的构造方法,在构造方法内初始化state参数,为ListView指定dataSource,并指定ListView的刷新状态为false,代码:
onstructor(props){
super(props);
this.state = {
dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),//指定当数据不同时才刷新ListView
loaded:false,
dataArray:new Array(), //存储数据model的数组
date:0,
isRefreshing:false, //ListView下拉刷新初始状态
}
- 视图渲染会调用
render()方法,将ListView生成
render() {
return(
<ListView
style={{flex:1}}
dataSource={this.state.dataSource}
renderRow={model=>this.renderRow(model)}
onEndReached={() => this.fetchData(this.state.date)}
enableEmptySections={true}
refreshControl={
<RefreshControl //ListView的下拉刷新控件
refreshing={this.state.isRefreshing}
onRefresh={() => this.refreshData()} //刷新时调用的方法
/>
}
/>
);
}
- 组件已经加载完成后会调用
componentDidMount ()函数,在此方法内执行网络请求:
componentDidMount() {
this.fetchData(0);
}
//网络请求
fetchData(date) {
var url;
if (date === 0) {
url = "http://news-at.zhihu.com/api/4/news/latest";
}else{
url = "http://news-at.zhihu.com/api/4/news/before/" + date;
}
fetch(url)
.then((responseData) => responseData.json())
.then((jsonString) => {
this.setState({
dataArray:this.state.dataArray.concat(jsonString.stories),//将json解析之后的数据数组交给dataArray
dataSource:this.state.dataSource.cloneWithRows(this.state.dataArray),根据dataArray中的数据生成ListView的dataSource
date:jsonString.date,
loaded:true,
isRefreshing:false,//将刷新状态置为false
})
})
.done()
}
- 组件生命周期
-
componentWillMount () 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次
-
componentDidMount () 在组件第一次绘制完成的回调函数，通知组件已经加载完成
-
componentWillReceiveProps() 组件的props或state进行了修改,组件收到新的属性
-
shouldComponentUpdate() 是否更新组件,可以返回false或true来控制是否进行渲染
-
componentWillUpdate()组件将要刷新
-
componentDidUpdate()组件已经完成更新
