前言

前陣子開始學習 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 搜索到阮一峰大神的 es6 教程，非常不錯。同時，也推薦 MDN，也是不錯的學習 JavaScript 的地方。當時學習了一兩天這些基礎的知識，有了初步的了解。

三、了解 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,
    });
  }

總結

項目中還需要進行完善優化，后續會學習redux對架構進行修整，也會學習性能方面對項目進行修改，也會增添一些動畫效果。希望能和大家一起學習，一起進步。

項目地址