first react native

import React, {Component} from 'react';
import {Platform,FlatList, StyleSheet, Text,Image, View} from 'react-native';

var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false
    };
  this.fetchData = this.fetchData.bind(this);
};
  componentDidMount(): void {
    this.fetchData();
  }
  fetchData(){
    fetch(REQUEST_URL).then(response=>response.json()).then(responseData => {
      this.setState({
        data:this.state.data.concat(responseData.movies),
        loaded:true
      });
    });
  }
  render(){
    if(!this.state.loaded){
      return this.renderLoadingView();
    }
    return (
        item.id} style={styles.list}/>
    );
  }
  renderLoadingView(){
          return(
              
                Loading movies...
              
          );
  }
  renderMovie({item}){
          return(
            
              
              
                {item.title}
                {item.year}
              
            
          );
  }
}

var styles = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:"row",
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"#F5FCFF"
  },
  rightContainer:{
    flex:1
  },
  title:{
    fontSize:20,
    marginBottom:8,
    textAlign: "center"
  },
  year:{
    textAlign: "center"
  },
  thumbnail:{
    width:53,
    height: 81
  },
  list: {
    paddingTop:20,
    backgroundColor:"#F5FCFF"
  }

});

你可能感兴趣的:(react,native)