2.创建一个js文件
3.写js文件内容
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
ListView,
Image
} from 'react-native';
const REQUEST_Url = 'https://api.douban.com/v2/movie/top250'
//网络请求的地址
class OneView extends Component{
constructor(props){
super(props);
this.state={
movies:new ListView.DataSource({ //相当于 ios 的属性
rowHasChanged:(row1,row2) => row2 !== row1
}),
loaded:false //相当于 ios 的属性
};
this.fetchData(); //http请求数据
}
//数据请求
fetchData() {
console.log('数据')
fetch(REQUEST_Url)
.then(response => response.json())
.then((responseData) => {
this.setState({//给属性设置，如果值有变化就会去刷新数据
movies :this.state.movies.cloneWithRows(responseData.subjects),
loaded:true,
});
})
.done()
}
//cell 数据的展示 这是一个函数
renderMovieList(movie){
<View>
<View>
<Image source={{uri:movie.images.medium}} style={styles.movieStyle}/>
<Text>{movie.title}</Text>
</View>
</View>
);
}
render() {
if(!this.state.loaded){
return(
<View>
<Text>加载中</Text>
</View>
);
}
return (
<ListView
dataSource={this.state.movies}
renderRow={this.renderMovieList}
/>
);
}
}
const styles = StyleSheet.create({
movieStyle:{
width:120,
height:120,
},
movieText:{
width:100,
height:50,
fontSize:15,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
export {OneView as default}
