React Native 項目（One 【一個】客戶端）

前段時間開始學習React Native，而後試着開始作一個小項目，在練手的同時，分享出來但願和各位同窗互相學習react-native項目。以前寫過項目相關的文章，沒看過的同窗能夠參考一下：

• React-native項目入門與思考
• Flux, Reflux,Redux 學習與思考
• React native 項目入門(知乎日報，豆瓣電影，[one]一個)
• React native 項目進階(redux, redux saga, redux logger)

  React Native項目效果

目前項目完成了（One 【一個】）主體界面功能，固然功能和原App還有較大的差距，以前主要對ios進行了適配，這兩天對Android也進行了一些調整。有什麼bug你們能夠評論或者在github上提issue。先看一下效果圖：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

這裏貼的是ios的效果圖，android端的相似。接下來介紹項目的結構，用到的一些第三方庫，以及項目過程當中的小坑。

項目結構

• Pages
  項目的主要界面，目錄下有One、Douban、Zhihu三個文件夾，分別對應one、豆瓣、知乎日報三個應用，其中one是完成度相對比較高的，其餘兩個應用界面不多。
• Assets
  目錄下存放了項目中用到了一些圖標，這裏存放的是android和ios的共有圖標，好比one主界面下面的四個圖標。android和ios的launch icon是在各自工程中分別設置的。
• Constants
  定義項目中的常量
• Components
  項目的一些自定義components，能夠在多個pages中使用。
• Styles
  定義經常使用的界面style，使用時能夠直接引用，模擬android的styles，這樣就不須要在每一個page中重複定義styles
• Utils
  定義經常使用的一些工具類，如網絡請求、時間格式、展現屬性等。
• Actions
• reducers
• sagas
  這三個目錄是redux相關的一些方法，相關的介紹能夠查看 React native 項目進階(redux, redux saga, redux logger)，固然閱讀以前最好有redux基礎，推薦redux的學習教程：
  leonshi.com/redux-saga-…
  cn.redux.js.org/index.html

第三方庫

React Native 從第一次提交到如今已經有20個月的時間，目前github上有近4萬star，不少大牛貢獻了各類第三方庫，目前開始學習React Native對於新人初學者來講文檔和社區很是友好。這裏羅列下用到的第三方庫：

"react-native-button": "github:ide/react-native-button",
    "react-native-datepicker": "^1.3.2",
    "react-native-drawer": "^2.2.2",
    "react-native-fs": "^2.0.1-rc.2",
    "react-native-root-toast": "^1.0.3",
    "react-native-router-flux": "[3.30.1]",
    "react-native-scrollable-tab-view": "0.6.0",
    "react-native-sound": "^0.8.3",
    "react-native-viewpager": "^0.2.1",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-logger": "^2.6.1",
    "redux-saga": "^0.11.1"複製代碼

其中部分比較簡單，有些在以前的文章中進行了介紹，下面主要介紹：

"react-native-viewpager": "^0.2.1",
    "react-native-scrollable-tab-view": "0.6.0",
    "react-native-sound": "^0.8.3",
    "react-native-fs": "^2.0.1-rc.2",複製代碼

React-Native-ViewPager

是一個viewpager，one項目中的首頁、文章頁、音樂頁均使用了viewpager，使用率很高，先看一個demo：

<ViewPager
                        dataSource={this.state.banners}
                        renderPage={this.renderBanners}
                        isLoop={true}
                        autoPlay={true}
                    />複製代碼

dataSource定義數據源，其數據源的定義過程是：

var bannerDataSource = new ViewPager.DataSource({
            pageHasChanged: (p1, p2) => p1 !== p2,
        });  

        banners: bannerDataSource.cloneWithPages([]),複製代碼

renderPage用於展現每一個pager的界面

renderBanners(data, pageID) {
        return (
            <Image style={{ height: 140, width: deviceWidth, }} source={{uri: data.cover}}> </Image>
        );
    }複製代碼

isLoop 是否輪播

autoPlay 是否自動播放

renderPageIndicator定義indicator的樣式 ，固然可使用default的樣式，這裏是一個示例，隱藏掉indicator：

renderPageIndicator={()=>(<View style={{width: 0, height: 0}}></View>)}複製代碼

react-native-scrollable-tab-view

react-native-scrollable-tab-view用於定義應用的主tab，項目中主要定義了one的四個tab，能夠滑屏幕切換界面，在項目中因爲各個子界面自身有左右切換的需求，所以關閉了該功能。

部分設置：

renderTabBar
自定義tabbar，如項目中自定義了四個tab的樣式

onChangeTab
當tab切換時回調

locked
是否鎖定，鎖定時不能左右滑動

page
設置選中的tab

項目使用示例：

<ScrollableTabView initialPage={0} locked={true} prerenderingSiblingsNumber={1} tabBarPosition="bottom"
                               renderTabBar={()=><FacebookTabBar tabIcons={this.tabIcons}/>}>
                <OneHome tabLabel="首頁"/>
                <OneRead tabLabel="閱讀"/>
                <OneMusic tabLabel="音樂"/>
                <OneFilm tabLabel="電影"/>
            </ScrollableTabView>複製代碼

react-native-fs

react-native-sound

這兩個主要用於one音樂的播放，其中react-native-fs主要用於音樂的下載，react-native-sound用於本地文件的播放，這兩個庫都用到了原生方法，所以須要分別在android和ios項目中進行設置使用：

ios端

1.

如圖須要Add兩個lib的*.xcodeproj到主工程的Libraries中，而後

2.

如圖Add全部的*.a文件，編譯運行就ok了。

Android 端

1. 在setting.gradle中添加：

   include ':app'
   include ':react-native-fs'
   project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
   include ':RNSound', ':app'
   project(':RNSound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')複製代碼

2. 在build.gradle中添加：

   compile project(':react-native-fs')
    compile project(':RNSound')複製代碼

   

   Paste_Image.png

注意添加位置要正確，對代碼進行從新編譯，在Android目錄機構下便可以看到RNSound、react-native-fs兩個module。

兩個lib在react-native 中的使用比較簡單，能夠參考one項目中的使用：react-native-sound 和react-native-fs的使用

項目中踩坑

1. Image中設置source＝{{url:"http://..."}}
   在ios中這樣設置是沒有問題的，可是android中不起效, 須要設置source＝{{uri:"http://..."}},另關於Image，目前必須設置width和height，官方解釋爲防止在進行渲染時若是寬高不固定容易形成界面跳動，影響用戶體驗。
2. react-native-sound 播放路徑問題

   var whoosh = new Sound('whoosh.mp3', Sound.MAIN_BUNDLE, (error) => {
   if (error) {
    console.log('failed to load the sound', error);
   } else { // loaded successfully
    console.log('duration in seconds: ' + whoosh.getDuration() +
        'number of channels: ' + whoosh.getNumberOfChannels());
   }
   });複製代碼

   其中'whoosh.mp3'爲相對路徑，Sound.MAIN_BUNDLE爲基本路徑，在ios中可用，可是在android中提示找不到路徑，最終第一個參數設置絕對路徑，第二個參數設置爲 '' 空串。
3. react-native-sound 播放問題

   musicHandler = new Sound(`${RNFS.DocumentDirectoryPath}/music.mp3`, '',(error) => {
           if (error) {
               console.log('failed to load the sound', error);
           } else { // loaded successfully
               this.playSound();
           }
       });複製代碼

   須要在sound建立成功的回調中啓動播放，不能夠直接寫在建立的語句以後。

4.gif圖問題
ios的Image支持直接播放gif圖，android須要添加lib，在build.gradle的dependencies中添加：

compile 'com.facebook.fresco:animated-gif:0.12.0'//for gif複製代碼

5.佈局問題

Paste_Image.png

這種佈局能夠設置marginTop爲負值便可。

1. 關於react-native-viewpager和react-native-srollable-tab-view嵌套問題
   當發生嵌套時，可能發生界面的錯位，這是能夠設置view的style：overflow: 'hidden'，能夠避免界面疊加錯位。

總結

目前項目中還有較多的問題，尤爲是Android端，以後還會繼續進行完善。根據目前的開發體驗，感受react native很是適合於展現類型的app，開發效率很是高，可是在Android上體驗要低於ios，有很大的優化空間。
接下來在繼續完善項目的基礎上，繼續學習相關的知識，爭取作出本身的東西，實如今React-native項目入門與思考中立下的flag。

項目地址請戳這裏

歡迎關注公衆號wutongke，天天推送移動開發前沿技術文章：

wutongke

推薦閱讀：

React-native項目入門與思考
React native 項目入門(知乎日報，豆瓣電影，[one]一個)
React native 項目進階(redux, redux saga, redux logger)
React Native 項目2（One 【一個】客戶端）