React-Native改变FB官网实例

/**
*官网例子
*改变成es6写法
*/
'usestrict';
importReact,{
AppRegistry,Component,Image,StyleSheet,Text,View,ListView
}from'react-native';

varMOCKED_MOVIES_DATA=[
{title:'我们奔跑吧',year:'2016',posters:{thumbnail:'http://i.imgur.com/UePbdph.jpg'}}
];


varREQUEST_URL='https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

classnativeProjectextendsComponent{

constructor(props){
super(props);
this.state={
movies:null,dataSource:newListView.DataSource({
rowHasChanged:(row1,row2)=>row1!==row2,}),loaded:false,};
}

componentDidMount(){
this.fetchData();
console.log(this.fetchData());
}

fetchData(){
fetch(REQUEST_URL)
.then((response)=>response.json())
.then((responseData)=>{
this.setState({
dataSource:this.state.dataSource.cloneWithRows(responseData.movies),loaded:true,});
})
.done();
}

renderLoadingView(){
return(
<Viewstyle={styles.container}>
<Text>
正在加载电影数据……
</Text>
</View>
);
}

renderMovie(movie){
return(

<Viewstyle={styles.container}>
<Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<Viewstyle={styles.rightContainer}>
<Textstyle={styles.title}>{movie.title}</Text>
<Textstyle={styles.year}>{movie.year}</Text>
</View>
</View>
);
}

render(){
if(!this.state.loaded){
returnthis.renderLoadingView();
}
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
}
}

conststyles=StyleSheet.create({
container:{
flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},rightContainer:{
flex:1,//backgroundColor:'red',thumbnail:{
width:53,height:81,title:{
fontSize:20,marginBottom:8,textAlign:'center',year:{
textAlign:'center',});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!