React Native 二:快速入門

標籤：

前面我們使用react-native init建立了一個項目，這是一個簡單的Hello World App（項目結構如）。對於iOS來說，你需要編輯index.ios.js來改變App；對於Android，你需要編輯index.android.js來修改App。然後搖晃菜單中點擊Road JS查看改變。下面我們就以Android為例子來嘗試修改了App。
一、修改index.android.js檔案index.android.js檔案：

//Mock資料var MOCKED_MOVIES_DATA = [  {title: ‘Title‘, year: ‘2015‘, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},];//匯入React-Native相關組件import React, {  AppRegistry,  Component,  Image,  StyleSheet,  Text,  View,} from ‘react-native‘;//建立AwesomeProject組件類class AwesomeProject extends Component {  //使用Mock資料，通過Html渲染組件   render() {    var movie = MOCKED_MOVIES_DATA[0];    return (      <View style={styles.container}>        <Text>{movie.title}</Text>        <Text>{movie.year}</Text>        <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail}/>      </View>    );  }}//渲染組件的樣式var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  thumbnail: {    width: 53,    height: 81,  },});//註冊建立的AwesomeProject組件類AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

二、重新載入js修改完index.android.js檔案後，搖晃你的手機，會彈出如下菜單。選擇Reload JS：
三、添加一些樣式現在們修改下標題，年份和圖片的展示，通過添加一些樣式展示呈左右布局形式，修改index.android.js檔案如下：1.index.android.js檔案：

var MOCKED_MOVIES_DATA = [  {title: ‘Title‘, year: ‘2015‘, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},];import React, {   ... ... } from ‘react-native‘;class AwesomeProject extends Component {  render() {    var movie = MOCKED_MOVIES_DATA[0];    return (      //書寫新的渲染樣式      <View style={styles.container}>        <Image          source={{uri: movie.posters.thumbnail}}          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({  container: {    flex: 1,    //橫向排列    flexDirection: ‘row‘,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  //渲染剩餘空間  rightContainer: {      flex: 1,  },  thumbnail: {    width: 53,    height: 81,  },  //添加title和year展示樣式  title: {    fontSize: 20,    marginBottom: 8,    textAlign: ‘center‘,  },  year: {    textAlign: ‘center‘,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

2.重新載入JS，展示如下：
四、擷取真實資料下面我們從Rotem Tomatoes.s的API擷取資料，用於React-Native展示：1.修改index.android.js檔案

//擷取遠程真實資料的URLvar REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;import React, {   ... ... } from ‘react-native‘;class AwesomeProject extends Component {  //建構函式，初始化movies為null  constructor(props) {    super(props);    this.state = {      movies: null,    };  }  //組件在載入到虛擬DOM的時候，請求API資料  componentDidMount() {    this.fetchData();  }  //請求API資料  fetchData() {    fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {      this.setState({        movies: responseData.movies,      });    }).done();  }  render() {    //未請求資料，正在載入中...    if (!this.state.movies) {      return this.renderLoadingView();    }    //資料返回了，渲染電影資料     var movie = this.state.movies[0];    return this.renderMovie(movie);  }  //渲染正在載入中  renderLoadingView() {    return (      <View style={styles.container}>        <Text>          Loading movies...        </Text>      </View>    );  }  //渲染擷取電影資料  renderMovie(movie) {    return (      <View style={styles.container}>        <Image          source={{uri: movie.posters.thumbnail}}          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.重新載入JS，顯示如下：
五、列表展示我們嘗試把API中請求返回的所有資料，用ListView展示出來；1.修改index.android.js檔案；

var REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;import React, {  ... ...  //引入清單控制項   ListView,  ... ... } from ‘react-native‘;class AwesomeProject extends Component {  constructor(props) {    super(props);    //初始化列表資料來源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.setState({        //請求API返回的電影資料作為列表的資料來源        dataSource: this.state.dataSource.cloneWithRows(responseData.movies),        loaded: 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({  ... ...   //列表展示樣式  listView: {    paddingTop: 20,    backgroundColor: ‘#F5FCFF‘,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

2.重新載入JS，顯示如下：

React Native 二:快速入門