React Native II: Quick Start

earlier we created a project using React-native init, which is a simple Hello World App (project structure, for example). For iOS, you need to edit index.ios.js to change the app, and for Android you need to edit index.android.js to modify the app. Then shake the menu and click on Road JS to view the changes. Let's use Android as an example to try to modify the app.
First, modify the Index.android.js fileindex.android.js File:

Mock data var = [{title: ' title ', Year: ' Mocked_movies_data ', posters: {thumbnail: ' http://i.imgur.com/UePbdph.jpg '} },];//Importing React-native related components import React, {appregistry, Component, Image, StyleSheet, Text, View,} from ' react-native '; Create Awesomeproject component Classes Class Awesomeproject extends Component {//Use mock data, render () by HTML render component () {var movie = Mocked_mo    VIES_DATA[0]; Return (<view style={styles.container}> <Text>{movie.title}</Text> <text>{movi E.year}</text> <image Source={{uri:movie.posters.thumbnail}} style={styles.thumbnail}/> </View  >); }}//rendering component Style var styles = stylesheet.create ({container: {flex:1, justifycontent: ' Center ', Alignitems: ' Center ' , BackgroundColor: ' #F5FCFF ',}, thumbnail: {width:53, height:81,},});//Register to create Awesomeproject component class Appregistry. RegisterComponent (' Awesomeproject ', () = Awesomeproject);

second, re-load JSwhen you finish modifying the Index.android.js file, shaking your phone will pop up the menu below. Select Reload JS:
Third, add some stylesNow we modify the title, year and the display of the picture, by adding some styles to show the left and right layout, modify the Index.android.js file as follows:1.index.android.js File:

var = [{title: ' title ', Year: ' Mocked_movies_data ', posters: {thumbnail: ' http://i.imgur.com/UePbdph.jpg '}},];impo RT React, {...} from ' react-native '; class Awesomeproject extends Component {render () {var movie = Mocked_mov    IES_DATA[0]; return (//write a new rendering style <view style={styles.container}> <image source={{uri:movie.posters. Thumbnail}} style={styles.thumbnail}/> <view style={styles.rightcontainer}> <text sty        Le={styles.title}>{movie.title}</text> <text style={styles.year}>{movie.year}</text>  </View> </View>); }}var styles = stylesheet.create ({container: {flex:1,//horizontal arrangement flexdirection: ' Row ', Justifycontent: ' Center ', Alignitems: ' Center ', backgroundcolor: ' #F5FCFF ',},//render the remaining space Rightcontainer: {flex:1,}, thumbnail: {width:53, height:81,},//Add title and year display style title: {fontsize:20, marginBottom:8, textAlign: ' Center ',}, Year: {textAlign: ' Center ',},}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

2. Reload JS, shown as follows:
Iv. obtaining real databelow we get data from the Rotem TOMATOES.S API for react-native display:1. Modify the Index.android.js file

Get the remote real data urlvar Request_url = ' https://raw.githubusercontent.com/facebook/react-native/master/docs/ Moviesexample.json '; import React, {...} from ' react-native '; class Awesomeproject extends Component {//constructor, initializing mo    VIES is null constructor (props) {super (props);  This.state = {movies:null,};  }//Component request API Data Componentdidmount () {this.fetchdata () when loading to virtual DOM;      }//Request API Data Fetchdata () {fetch (Request_url). Then ((response) and Response.json ()). Then ((responsedata) = {    This.setstate ({movies:responseData.movies,});  }). Done ();    } render () {//No data requested, loading in ... if (!this.state.movies) {return This.renderloadingview ();    }//data returned, rendered movie data var movie = This.state.movies[0];  return This.rendermovie (movie); }//Render loading in Renderloadingview () {return (<view style={styles.container}> <Text> Lo  Ading movies ... </Text> </View>); }//Render get Movie data Rendermovie (movIE) {return (<view style={styles.container}> <image Source={{uri:movie.posters.thumbna Il}} style={styles.thumbnail}/> <view style={styles.rightcontainer}> <text style=          {styles.title}>{movie.title}</text> <text style={styles.year}>{movie.year}</text>  </View> </View>); }}var styles = Stylesheet.create ({...}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

2. Reload JS, shown as follows:
v. List Displaywe try to display all the data returned in the API with the ListView;1. Modify the index.android.js file;

var request_url = ' Https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json '; import React, {....//Introduce list control ListView, ...} from ' react-native '; class Awesomeproject extends Component {construct    or (props) {super (props);  Initialize list data source DataSource this.state = {datasource:new Listview.datasource ({rowhaschanged: (row1, row2) = =  Row1!== Row2,}), Loaded:false,};  } componentdidmount () {this.fetchdata (); } fetchdata () {fetch (Request_url). Then ((response) = Response.json ()). Then ((responsedata) = {This.setsta Te ({//Request API returns the movie data as a list of data sources dataSource:this.state.dataSource.cloneWithRows (responsedata.movies), Loa    Ded:true,});  }). Done ();    } render () {if (!this.state.loaded) {return This.renderloadingview (); } return (<listview Datasource={this.state.datasource} Renderrow={this.rendermovie} style   ={styles.listview}/> );  } renderloadingview () {...}  Rendermovie (Movie) {return (...); }}var styles = Stylesheet.create ({...//list display style ListView: {paddingtop:20, backgroundcolor: ' #F5FCFF ',},} ); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

2. Reload JS, shown as follows:

React Native II: Quick Start