前陣子開始學習 React Native，一個人摸滾帶爬的也算是能寫個 小專案 了，在這裡分享一下自己從零開始學習的過程，也推薦一些比較優秀的學習資源，讓大家學習過程可以提高一些效率。

在路上

一、環境搭建和 IDE 選型

React Native 環境搭建可以看 官網 ,也可以去看筆者的 上篇文章 ，接下去是IDE 選型和配置的環節，有幾種比較不錯的 IDE：

• Atom + Nuclide ：Atom 本質上是一個文字編輯器，而不是一個 IDE，因此在用來開發 React Native 時需要配合 Nuclide 一起使用。
• Sublime Text 3 ： 功能十分強大，主要在於它的外掛機制。通過 Package Control 功能，可以安裝各種需要的外掛。
• WebStorm ：WebStorm 是著名的 JetBrains 公司開發的號稱最智慧的 Javascript 整合開發環境。
• Visual Studio Code ：Visual Studio Code 是微軟推出的一個輕量級的開源 Web 整合開發環境。

筆者選擇了 WebStorm ，只有一個原因，那就是它和 Andoid Studio 很像(筆者是 Andorid Developer)。

二、學習基礎知識

因為沒接觸過 Web 前端這一塊，所以第一天去學習了 JavaScript、html 和 css 一些基礎的知識。記得那天瘋狂的找學習的資料，剛開始在極客學院、慕課網這些學習網站上學習了一會，後面在知乎上還是 google 搜尋到阮一峰大神的 

三、瞭解 React Native

接下去就開始瘋狂的搜尋 React Native 的學習資料，因為完全不知道怎麼去寫 React Native，所以找到了一些免費的視訊學習資源，如果你想要一些學習資源的話，可以去 React Native 學習指南 看看，這邊概括了很多優秀的學習資源，非常不錯。說實話看視訊效率實在有點低，你會發現視訊只是在逐個講解講官網的元件和 Api ，所以筆者看了幾天視訊，對 React Native 有了初步瞭解後就沒再接著看視訊學習了。

四、學習優秀專案

當時筆者對 React Native 有了一點了解後，便去 GitHub 上尋找一些優秀的專案對其進行學習。這邊給個 網站 ，裡面概括了一些優秀的專案。大家可以找一些 star 比較多的，然後更新時間比較近的專案進行學習，筆者是通過 Gank.io 專案進行學習。關於如何學習，給個建議就是 clone 到本地後，按照專案作者的時間線去學習。當然學習過程中會遇到一些你不明白的知識點，那正是你去鞏固 JavaScript 或是 React 知識的時候，這樣鞏固學習比光看書學習效率高多了。

五、寫一個專案

開始單獨寫一個專案練手，可以是一個真實專案，也可以是一個小專案用開放的 Api 去完成。筆者寫的 專案 是通過 豆瓣 Api 實現的，UI 介面大家可以自行充當設計師去設計，圖示可以去 Iconfont 找。寫完這個練手專案，你會更清楚如何去學習 React Native 。

專案介紹

首先看下效果圖：

專案中運用了一些常用的第三方庫，關於第三方庫大家可以去 js.coach 查詢。接下去對專案的介面和功能進行相應的介紹。

1.介面下方的主 tab

專案中有三個主 tab：首頁、推薦和我的，通過 react-native-scrollable-tab-view 實現。使用示例如下：

render() {
    return (
        <TabNavigator tabBarStyle={{ height: 60, overflow: 'hidden' }}>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'home'}
              title="首頁"
              titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
              selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
              renderIcon={() => <Image source={require('./images/home_normal.png')}/>}
              renderSelectedIcon={() => <Image source={require('./images/home_selected.png')}/>}
              //badgeText ="1"
              onPress={() => this.setState({selectedTab: 'home'})}
          >
            < Home {...this.props}/>
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === 'recommend'}
              title="推薦"
              titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
              selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
              renderIcon={() => <Image source={require('./images/recommend_normal.png')}/>}
              renderSelectedIcon={() => <Image source={require('./images/recomm_selected.png')}/>}
              onPress={() => this.setState({selectedTab: 'recommend'})}
          >
            < Recommend {...this.props} />
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === 'mine'}
              title="我的"
              titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
              selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
              renderIcon={() => <Image source={require('./images/mine_normal.png')}/>}
              renderSelectedIcon={() => <Image source={require('./images/mine_selected.png')}/>}
              onPress={() => this.setState({selectedTab: 'mine'})}
          >
            < Mine { ...this.props }/>
          </TabNavigator.Item>

        </TabNavigator>

    );
  }

2.首頁的圖片輪播，使用了 react-native-viewpager 實現。使用示例如下：

定義資料來源

this.state = {
      dataSource: new ViewPager.DataSource({
        pageHasChanged: (p1, p2) => p1 !== p2
      })
    };

 this.setState({
        dataSource: this.state.dataSource.cloneWithPages(contentData),
      });

應用 ViewPager 元件

<ViewPager
	dataSource={this.state.dataSource}
	renderPage={this.renderPage}
	isLoop={true}
	autoPlay={true}>
</ViewPager>

顯示每個 Page 介面

_renderPage(data) {
    return (
        <Image style={ styles.pager } source={{uri: data.cover}}/>
    );
  }

3.推薦列表的呈現，ListView 的運用，使用示例如下：

設定資料來源

this.state = {
      dataSource: new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      }),
      data: null,
      loaded: false,
      isRefreshing: false,
      loadMore: false,
      start: 0,
      count: 20,
    };

應用 ListView 元件

<ListView
	dataSource = {this.state.dataSource}
	renderRow = {this._renderItem.bind(this)}
	onEndReached={this._loadMore.bind(this)}
	renderFooter={this._renderFooter.bind(this)}
	onEndReachedThreshold = {29}
	refreshControl={
		<RefreshControl
		refreshing={this.state.isRefreshing}
		onRefresh={this._refresh.bind(this)}
		tintColor='#aaaaaa'
		title='Loading...'
		progressBackgroundColor='#aaaaaa'/>
	}>
</ListView>

4.導航條的設定，使用 react-native-navbar 實現。使用示例如下：

<NavigationBar
	style = {{height:40}}
	title={{title: '首頁'}}
/>

5.網路資料的獲取，使用示例如下：

async fetchData() {
    let response = await fetch(API_TOP);
    let responseJson = await response.json();
    let responseData = responseJson.subjects;
    this.setState({
      data: responseData,
      dataSource: this.state.dataSource.cloneWithRows(responseData),
      loaded: true,
      isRefreshing: false,
    });
  }