React Native 簡介：用 JavaScript 搭建 iOS 應用(2)
【編者按】本篇文章的做者是 Joyce Echessa——渥合數位服務創辦人，畢業於臺灣大學，近年來專一於協助客戶進行 App 軟體以及網站開發。本篇文章中，做者介紹經過 React Native 框架構建一個示例應用的開發過程，使得網絡技術和移動開發碰撞出絢麗火花！javascript
React Native 簡介：用 JavaScript 搭建 iOS 應用 (1)html
在 render()函數中，使用 TabBarIOS 組件建立一個分頁列。別忘了添加你使用的組件到解構賦值中，不然之後調用都須要使用完整名稱，好比 React.TabBarIOS。java
咱們建立了兩個分頁列項目。咱們爲每個項目設置選中狀態，並定義一個該項目被點擊時所調用的函數。以精選標籤爲例，咱們以前定義的 selectedTab 狀態爲「featured」，那麼 selected 設置爲 true，不然將被設置爲 false。對於搜索標籤頁也同樣，須要檢查 selectedTab 是否爲「search」。一旦項目的 selected 設置爲true，將成爲激活狀態標籤。咱們用系統圖標表示標籤欄項目。react
須要注意的是，咱們使用的自定義組件標籤，和其餘的組件同樣。例如，咱們須要相應的模塊，並將其分配給一個變量，你可使用變量來調用模塊。結果如同組件類的 render()函數同樣，成爲文件代碼的一部分。提醒一下，做者習慣使用變量名做爲各自的類名，但這並非必須，你能夠用你喜歡的名稱。git
當一個標籤欄項目點擊時，會調用在組件的 onPress 屬性中定義的回調函數。函數會爲 selectedTab 屬性設置數值，這個屬性將最終肯定哪一個是活動標籤。github
調用模擬器，按下 Command-R 重載該應用。正以下圖所示。json
添加導航欄
下一步，咱們將添加一個導航欄，並將兩個文件添加到項目中。這些都將做爲相應標籤出如今導航堆棧的根視圖。分別命名文件爲 BookList.js 和 SearchBooks.js。react-native
在 BookList.js 添加如下代碼。api
javascript'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Component
} = React;
var styles = StyleSheet.create({
});
class BookList extends Component {
render() {
return (
<View>
</View>
);
}
}
module.exports = BookList;
在 SearchBooks.js 中添加如下代碼。網絡
javascript'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Component
} = React;
var styles = StyleSheet.create({
});
class SearchBooks extends Component {
render() {
return (
<View>
</View>
);
}
}
module.exports = SearchBooks;
在這兩個文件中建立空白視圖模塊，並導出該模塊。
按照如下代碼修改 Featured.js。
javascript'use strict';
var React = require('react-native');
var BookList = require('./BookList');
var {
StyleSheet,
NavigatorIOS,
Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
}
});
class Featured extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Featured Books',
component: BookList
}}/>
);
}
}
module.exports = Featured;
以上代碼使用 NavigatorIOS 組件來構造一個導航控制器。咱們將其初始路徑設定爲 BookList 組件（這意味着 BookList 爲其根視圖），並設置導航欄上方的標題。
接着用如下代碼修改 Search.js。
javascript'use strict';
var React = require('react-native');
var SearchBooks = require('./SearchBooks');
var {
StyleSheet,
NavigatorIOS,
Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
}
});
class Search extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Search Books',
component: SearchBooks
}}/>
);
}
}
module.exports = Search;
正如在 Featured.js 同樣，以上代碼建立導航控制器，再設置其初始路徑，接着爲它設置標題。
重載應用，你能夠看到如下界面。
獲取並顯示數據
如今，咱們開始將數據添加到視圖中。起初，咱們用虛構數據構建視圖，以後再從 API 獲取真實的數據。
在 BookList.js 中其餘變量聲明的文件頂部，添加如下代碼。
javascriptvar FAKE_BOOK_DATA = [
{volumeInfo: {title: 'The Catcher in the Rye', authors: "J. D. Salinger", imageLinks: {thumbnail: 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'}}}
];
以下圖所示修改解構賦值，以添加更多組件。
javascriptvar {
Image,
StyleSheet,
Text,
View,
Component,
} = React;
添加以下樣式。
javascriptvar styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1
},
title: {
fontSize: 20,
marginBottom: 8
},
author: {
color: '#656565'
}
});
以下圖所示，修改 BookList 類。
javascriptclass BookList extends Component {
render() {
var book = FAKE_BOOK_DATA[0];
return (
<View style={styles.container}>
<Image source={{uri: book.volumeInfo.imageLinks.thumbnail}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{book.volumeInfo.title}</Text>
<Text style={styles.author}>{book.volumeInfo.authors}</Text>
</View>
</View>
);
}
}
從新加載應用，能夠看到下圖界面。
在上面的代碼中，咱們建立一個 JSON 對象，很是相似於從 API 調用的對象。咱們爲一本書的對象建立屬性和值。在類文件中，咱們使用虛構數據，只爲了獲得第一個元素，並用它來填充咱們的視圖。咱們使用圖像組件來加載圖像到視圖。須要注意的是，咱們在樣式表中設定其寬度和高度。若是在樣式表中指定圖像的尺寸，那麼在視圖中將看不到圖像。
咱們爲容器指定了 flexDirection 爲「row」的樣式。這樣的話，元素的子代也將繼承該風格，默認值是水平佈局而不是縱向佈局。請注意，咱們是如何在組件內包裝其餘組件的。在上面代碼中，主容器中有兩個子元素——圖像和視圖。視圖也有本身的子類——兩個文本組件。
先佈局圖像組件，而後再將視圖（rightContainer）水平放置在它旁邊。咱們爲 rightContainer 指定的 flex 風格爲1。這使得該視圖組件佔據剩餘空間，而不會遮擋圖像組件。若是你想看 flex 樣式的效果，能夠爲 rightContainer 添加如下代碼。
javascriptbackgroundColor: 'red'
從新加載應用，你會看到空間被 rightContainer 樣式組件佔滿。但它不會遮擋到其餘組件。之因此沒有延伸到整個屏幕，是由於外容器設定了留白，而圖片也設置了右邊界。
刪除 rightContainer 的 flex 設定，再從新加載 App。如今組件只會佔據適應其內容的足夠空間。
若是將 thumbnail 和 rightContainer 的 flex 樣式設置爲2，它們將會佔據一樣的寬度，比例爲2:2（或者1:1）。你能夠將其設置爲任何須要的數值，比例會作出相應的改變。
你能夠嘗試不一樣的比例以獲得你想要的結果。讓咱們回到以前爲 rightContainer 添加紅色背景的那一步，繼續下面的步驟。
添加列表視圖
React Native 有一個 ListView 組件，顯示數據的滾動行——也就是 iOS 中的表視圖。
首先，修改解構語句顯示咱們添加的更多的組件。
javascriptvar {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
TouchableHighlight
} = React;
添加如下代碼到樣式表中。
javascriptseparator: {
height: 1,
backgroundColor: '#dddddd'
}
添加如下構造函數到 BookList 類。
javascriptconstructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
最後添加如下函數。
javascriptcomponentDidMount() {
var books = FAKE_BOOK_DATA;
this.setState({
dataSource: this.state.dataSource.cloneWithRows(books)
});
}
在構造函數中，咱們建立了一個 ListView.DataSource 對象，並將其分配給 dataSource 屬性。DataSource 是一個接口，ListView 用它來肯定在更新 UI 過程當中哪些行發生了變化。咱們提供了一個能夠比較兩列是否相同的函數，用於肯定數據列表是否變化。
當組件被加載到 UI 視圖時，會調用 componentDidMount()函數。該函數一旦被調用，咱們用數據對象中的數據來設置 datasource 屬性。
你可使用下面的代碼來修改 render()函數。
javascriptrender() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderBook.bind(this)}
style={styles.listView}
/>
);
}
將下面的函數添加到 BookList 類。
javascriptrenderBook(book) {
return (
<TouchableHighlight>
<View>
<View style={styles.container}>
<Image
source={{uri: book.volumeInfo.imageLinks.thumbnail}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{book.volumeInfo.title}</Text>
<Text style={styles.author}>{book.volumeInfo.authors}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
以上代碼在 render()函數中建立了一個 ListView 組件。這裏的 datasource 屬性與以前設定的數值一致。而後調用 renderBook()函數顯示 ListView 中的各列數據。
在 renderBook()函數中，咱們使用 TouchableHighlight 組件。這是一個包裝組件，能讓視圖正確響應點擊行爲。一旦點擊，該包裝組件的透明度就會下降，能夠容許底層顏色透過，使得視圖變暗或變色。這樣的話，若是你點擊一個 ListView 行，你會看到高亮色，就像以前設置的選擇表格視圖單元格時的響應同樣。咱們在分離器的底部添加一個樣式爲 separator 的空視圖組件。這樣的設定下，視圖會出現一個灰色的水平線，便於分割每行項目。
重載該應用，你會看到只有一個單元的表格視圖。
如今將真實數據加載到應用中。
從文件中移除 FAKE_BOOK_DATA 變量，並添加如下代碼。這是加載數據的網址。
javascriptvar REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
修改解析聲明。
javascriptvar {
Image,
StyleSheet,
Text,
View,
Component,
ListView,
TouchableHighlight,
ActivityIndicatorIOS
} = React;
添加如下樣式設定。
javascriptlistView: {
backgroundColor: '#F5FCFF'
},
loading: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
用下面的代碼修改構造函數。咱們爲組件的狀態對象添加另外一個屬性，用來判斷視圖是否成功加載。
javascriptconstructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
按下列代碼修改 componentDidMount()函數，並添加 fetchData()函數。 fetchData()將調用 Google 圖書 API，當它響應操做時，會將獲取的數據設置爲 DataSource 屬性，同時將 isLoading 設置爲 true。
javascriptcomponentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
isLoading: false
});
})
.done();
}
修改 render()函數並添加 renderLoadingView()。咱們添加一個檢查 isLoading，若是它的值爲 true，就回到由 renderLoadingView()返回的視圖。這個視圖顯示活動指示燈（一個轉盤），以及「正在載入書籍...」的字樣。當加載完成後，你應該看到表中的圖書清單。
javascriptrender() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderBook.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS
size='large'/>
<Text>
Loading books...
</Text>
</View>
);
}
從新加載應用，你會看到相似下圖的界面。
添加詳情視圖
若是你點擊表中的一個單元格，單元格將會突出顯示，但不會響應其它操做。咱們將添加一個詳情視圖，以顯示選擇當前書的詳細信息。
在項目中新建文件，並命名爲 BookDetail.js。將下面的代碼貼在該文件中。
javascript'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
Component,
Image
} = React;
var styles = StyleSheet.create({
container: {
marginTop: 75,
alignItems: 'center'
},
image: {
width: 107,
height: 165,
padding: 10
},
description: {
padding: 10,
fontSize: 15,
color: '#656565'
}
});
class BookDetail extends Component {
render() {
var book = this.props.book;
var imageURI = (typeof book.volumeInfo.imageLinks !== 'undefined') ? book.volumeInfo.imageLinks.thumbnail : '';
var description = (typeof book.volumeInfo.description !== 'undefined') ? book.volumeInfo.description : '';
return (
<View style={styles.container}>
<Image style={styles.image} source={{uri: imageURI}} />
<Text style={styles.description}>{description}</Text>
</View>
);
}
}
module.exports = BookDetail;
上述代碼的大部份內容，咱們以前已經討論過，這裏再也不贅述。以前沒接觸過的是 props 屬性，其用途是獲取數據。經過設置 props 屬性，將數據傳遞到這個類。在代碼中，咱們先得到數據，隨後用數據填充視圖。
須要注意的是，咱們設置了容器的上邊界。若是不這樣的話，視圖將從屏幕的最頂部開始，從而致使某些元素被導航欄遮擋。
在 BookList.js 中添加如下代碼。
javascriptvar BookDetail = require('./BookDetail');
修改 BookList 類中 render()函數的 TouchableHighlight。
javascript<TouchableHighlight onPress={() => this.showBookDetail(book)} underlayColor='#dddddd'>
上述代碼指定了當某列書籍被點擊時響應一個回調函數。粘貼下面的函數到該類。這將 BookDetail 視圖推送到導航堆棧中，並設置導航欄上的標題可見。而後將該選中行有關的圖書對象傳遞給 BookDetail 類。
javascriptshowBookDetail(book) {
this.props.navigator.push({
title: book.volumeInfo.title,
component: BookDetail,
passProps: {book}
});
}
重載該 App，你能看到當前選中書籍的詳細信息。
搜索
如今已經完成了精選標籤的主從視圖，咱們將繼續完善搜索選項卡，使用戶可以利用 API 查詢想要的書籍。
打開 SearchBooks.js 並按下面的代碼修改。
javascript'use strict';
var React = require('react-native');
var SearchResults = require('./SearchResults');
var {
StyleSheet,
View,
Text,
Component,
TextInput,
TouchableHighlight,
ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
marginTop: 65,
padding: 10
},
searchInput: {
height: 36,
marginTop: 10,
marginBottom: 10,
fontSize: 18,
borderWidth: 1,
flex: 1,
borderRadius: 4,
padding: 5
},
button: {
height: 36,
backgroundColor: '#f39c12',
borderRadius: 8,
justifyContent: 'center',
marginTop: 15
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
instructions: {
fontSize: 18,
alignSelf: 'center',
marginBottom: 15
},
fieldLabel: {
fontSize: 15,
marginTop: 15
},
errorMessage: {
fontSize: 15,
alignSelf: 'center',
marginTop: 15,
color: 'red'
}
});
class SearchBooks extends Component {
constructor(props) {
super(props);
this.state = {
bookAuthor: '',
bookTitle: '',
isLoading: false,
errorMessage: ''
};
}
render() {
var spinner = this.state.isLoading ?
( <ActivityIndicatorIOS
hidden='true'
size='large'/> ) :
( <View/>);
return (
<View style={styles.container}>
<Text style={styles.instructions}>Search by book title and/or author</Text>
<View>
<Text style={styles.fieldLabel}>Book Title:</Text>
<TextInput style={styles.searchInput} onChange={this.bookTitleInput.bind(this)}/>
</View>
<View>
<Text style={styles.fieldLabel}>Author:</Text>
<TextInput style={styles.searchInput} onChange={this.bookAuthorInput.bind(this)}/>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f'
onPress={this.searchBooks.bind(this)}>
<Text style={styles.buttonText}>Search</Text>
</TouchableHighlight>
{spinner}
<Text style={styles.errorMessage}>{this.state.errorMessage}</Text>
</View>
);
}
bookTitleInput(event) {
this.setState({ bookTitle: event.nativeEvent.text });
}
bookAuthorInput(event) {
this.setState({ bookAuthor: event.nativeEvent.text });
}
searchBooks() {
this.fetchData();
}
fetchData() {
this.setState({ isLoading: true });
var baseURL = 'https://www.googleapis.com/books/v1/volumes?q=';
if (this.state.bookAuthor !== '') {
baseURL += encodeURIComponent('inauthor:' + this.state.bookAuthor);
}
if (this.state.bookTitle !== '') {
baseURL += (this.state.bookAuthor === '') ? encodeURIComponent('intitle:' + this.state.bookTitle) : encodeURIComponent('+intitle:' + this.state.bookTitle);
}
console.log('URL: >>> ' + baseURL);
fetch(baseURL)
.then((response) => response.json())
.then((responseData) => {
this.setState({ isLoading: false});
if (responseData.items) {
this.props.navigator.push({
title: 'Search Results',
component: SearchResults,
passProps: {books: responseData.items}
});
} else {
this.setState({ errorMessage: 'No results found'});
}
})
.catch(error =>
this.setState({
isLoading: false,
errorMessage: error
}))
.done();
}
}
module.exports = SearchBooks;
述代碼中，咱們在構造函數中設置了一些屬性：bookAuthor、bookTitle、isLoading 和 errorMessage。下面簡要介紹下如何使用。
在 render()方法中，咱們須要檢查 isLoading 值是否爲 true，若是是則創建一個活動指示器，不然則建立一個空視圖（後面會用到）。而後，咱們建立一個被用來插入查詢的搜索表單。TextInput 用於接收輸入。當組件的值改變時（例如用戶鍵入一些文本），將會調用 TextInput 組件，同時爲組件指定一個回調函數。在調用時，回調函數 bookTitleInput()和 bookAuthorInput()利用用戶輸入的數據將設置 bookAuthor 和 bookTitles 屬性。當用戶按下搜索按鈕時，searchBooks()被調用。須要注意的是，React Native 沒有按鈕組件。因此，咱們使用 TouchableHighlight 來代替，並用文本包裝，使它的樣式看起來像一個按鈕。當按下搜索按鈕時，根據輸入的數據構成一個 URL。用戶能夠經過書名、做者或書名+做者進行搜索。若是結果成功返回，SearchResult 將被推到導航堆棧，不然提示錯誤消息。咱們還將響應數據傳遞給 SearchResults 類。
建立一個文件並命名爲 SearchResults.js，將下列代碼貼進去。
javascript'use strict';
var React = require('react-native');
var BookDetail = require('./BookDetail');
var {
StyleSheet,
View,
Text,
Component,
TouchableHighlight,
Image,
ListView
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontSize: 20,
marginBottom: 8
},
author: {
color: '#656565'
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
listView: {
backgroundColor: '#F5FCFF'
},
cellContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 10
},
thumbnail: {
width: 53,
height: 81,
marginRight: 10
},
rightContainer: {
flex: 1
}
});
class SearchResults extends Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource(
{rowHasChanged: (row1, row2) => row1 !== row2});
this.state = {
dataSource: dataSource.cloneWithRows(this.props.books)
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderBook.bind(this)}
style={styles.listView}
/>
);
}
renderBook(book) {
var imageURI = (typeof book.volumeInfo.imageLinks !== 'undefined') ? book.volumeInfo.imageLinks.thumbnail : '';
return (
<TouchableHighlight onPress={() => this.showBookDetail(book)}
underlayColor='#dddddd'>
<View>
<View style={styles.cellContainer}>
<Image
source={{uri: imageURI}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{book.volumeInfo.title}</Text>
<Text style={styles.author}>{book.volumeInfo.authors}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
showBookDetail(book) {
this.props.navigator.push({
title: book.volumeInfo.title,
component: BookDetail,
passProps: {book}
});
}
}
module.exports = SearchResults;
以上代碼以前已經討論過，也再也不贅述。代碼中得到數據，並將數據經過 props 屬性傳遞到類，同時建立填充了數據的 ListView。
做者注意到，在 API中，當你按做者搜索時，結果不必定是書的數據，而是做者自身的信息。這意味着某些行的 book.volumeInfo.imageLinks.thumbnail 和 book.volumeInfo.description 有未定義的值。因此咱們稍做檢查，若是沒有圖像則顯示一個空視圖。不然，咱們的應用將試圖加載不存在的圖像，這樣會容易引起崩潰。
咱們使用以前用過的 BookDetail 組件，來顯示每本書的詳細信息。如圖所示，打開 BookDetail.js 並修改 render()函數。在用數據填充視圖以前，檢查傳入的數據是否有相關圖像和詳細信息。若是嘗試載入的書籍沒有詳情或圖片，對應的區域將是空白。你能夠向用戶提示一個錯誤信息，在此咱們省略該步驟。
javascriptrender() {
var book = this.props.book;
var imageURI = (typeof book.volumeInfo.imageLinks !== 'undefined') ? book.volumeInfo.imageLinks.thumbnail : '';
var description = (typeof book.volumeInfo.description !== 'undefined') ? book.volumeInfo.description : '';
return (
<View style={styles.container}>
<Image style={styles.image} source={{uri: imageURI}} />
<Text style={styles.description}>{description}</Text>
</View>
);
}
重載應用，會看到搜索書籍的界面。
結束語
儘管仍在不斷完善，React Native 看起來頗有但願成爲構建移動應用的另外一種選擇。它爲 Web 開發人員開啓了一扇門，讓他們可以在移動開發領域一探究竟。同時爲移動開發者提供了一種簡化開發流程的新方式。
隨着項目的發展，讓咱們拭目以待 React Native 和應用開發（iOS和Android ——或者別的平臺）將會碰撞出什麼樣的火花。同時，若是你須要進一步確認網絡技術是否能用於實現真正的原生體驗，你能夠看看這些由 React Native 構建的應用：Facebook Ads Manager（徹底由 React Native 構建）以及 Facebook Groups（React Native 和 Objective-C 構建的混合應用）。
「學習一次，在任何地方應用」。單這一句足以證實學習 React Native 框架的意義。
你能夠在這裏下載完整示例項目。
爲了更進一步瞭解 React Native，你能夠參考下列視頻和資料。
你能夠在這下載 Xcode 項目，僅供參考。（完結）
React Native 簡介：用 JavaScript 搭建 iOS 應用 (1)
- 1. React Native 簡介：用 JavaScript 搭建 iOS 應用(2)
- 2. React Native 簡介：用 JavaScript 搭建 iOS 應用 (1)
- 3. React Native iOS環境搭建
- 4. 建立新的 React / React Native 應用
- 5. React Native 簡介與入門
- 6. 利用 Create React Native App 快速建立 React Native 應用
- 7. react-native:環境搭建
- 8. react-native-router-flux（簡單應用）
- 9. React Native MacOS環境搭建
- 10. React Native Ubuntu簡介
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • XML 應用程序 - XML 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. React Native 簡介：用 JavaScript 搭建 iOS 應用(2)
- 2. React Native 簡介：用 JavaScript 搭建 iOS 應用 (1)
- 3. React Native iOS環境搭建
- 4. 建立新的 React / React Native 應用
- 5. React Native 簡介與入門
- 6. 利用 Create React Native App 快速建立 React Native 應用
- 7. react-native:環境搭建
- 8. react-native-router-flux（簡單應用）
- 9. React Native MacOS環境搭建
- 10. React Native Ubuntu簡介