標籤:
前面我們使用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 二:快速入門