React-Native 之項目實戰(一)

時間 2019-11-10

標籤 react native 項目實戰欄目 React 简体版

原文原文鏈接

前言

本文有配套視頻，能夠酌情觀看。
文中內容因各人理解不一樣，可能會有所誤差，歡迎朋友們聯繫我。
文中全部內容僅供學習交流之用，不可用於商業用途，如所以引發的相關法律法規責任，與我無關。
如文中內容對您形成不便，煩請聯繫 277511806@qq.com 處理，謝謝。
轉載麻煩註明出處，謝謝。

資料：連接: https://pan.baidu.com/s/1b3abwy 密碼: k8p5php

源碼託管到 github 上，須要源碼的點我下載，喜歡的話記得 Star，謝謝！react

ES5轉ES6

關於ES6語法，建議你們能夠看下阮老師的 ECMAScriot 6
快速瞭解的話，你們能夠參考一下 es6語法快速上手

項目簡介

先來看下咱們仿照的這款APP的效果：

從上圖中，咱們能夠看出複雜度並不大，可是時間關係咱們儘可能將全部的模塊都作完，並完善細節。

譯註：android

建議打開視頻配合文字學習，以避免有某些細節文中沒有提到，但以文中內容爲準（根據反饋進行相應更新）ios

之因此選擇這款APP，和我我的的愛好有關，固然關鍵仍是由於這個APP總體並不複雜，包含了市面上常見APP的樣式，而且很順利地就獲取到全部請求參數和圖片資源，很適合咱們體驗 React-native 大體的開發流程。git

項目分析

在開發APP前，產品經理大體會進行需求的分析，而後開會討論開發過程當中須要使用到的技術、會遇到的難點、分配相應任務、傾聽開發人員意見並進行相應的修改，最終肯定總體原型圖、開發流程、技術、週期等等，固然其中還有UI的介入，咱們沒有產品經理，UI也有現成的，因此大體給你們劃分如下幾塊：es6
- 需求分析：這款APP主要是經過抓取各大電商平臺的 商品優惠信息 進行篩選、分類並最終展示給用戶，使用戶能夠方便、快捷、實時的獲取高質量的優惠信息。github
- 開發模型：咱們這邊相似基於 原型模型 開發。json
- 使用的技術：React-Nativereact-native
- 功能模塊：主要分爲 首頁、海淘模塊、小時風雲榜 三大模塊等其它附屬模塊（酌情增長）。api
- 總體架構：
  - 主體：由 TabBar 做爲主體框架，以 首頁、海淘模塊、小時風雲榜 爲總體模塊，根據 原型圖 的效果選擇相應的跳轉方式
  - 數據展現：根據 原型圖 選擇相應的數據展現方式
- 命名規則：參考 編碼規範文檔(不一樣公司之間都有差別，具體看公司提供的文檔，這邊先遵照下面提到的規則便可)
測試：MDZZ，誰測試→→！

工程環境配置

全部須要用到的資源點擊下載。
首先，來配置 iOS 端。
將壓縮包內的 Images.xcassets 文件夾直接替換掉咱們iOS工程中的 Images.xcassets 文件夾。
這時候咱們能夠看到全部圖片資源已經成功導入到iOS工程中，接着咱們點擊工程文件進行一些必要的配置。
General —— App Icons and Launch Images —— 修改 Launch Images Source 爲 Images.xcassets 文件夾內的 LaunchImage ，清除 Launch Screen File 內容。
General —— Deployment Info —— Device Orientation —— 只保留 Portrait 選項。
打開 info.plist 文件，找到 Bundle name 選項，將其內容修改成 逛丟學習
打開 info.plist 文件，找到 App Transport Security Settings 選項，給其添加 Allow Arbitrary Loads 選項並設置內容爲 YES (若是使用 IPV6標準 能夠忽略這一步)
OK,至此 iOS 端配置完畢。

接着，來配置 Android 端。
將壓縮包內的 drawable-xxhdpi 文件夾複製粘貼到 GD/android/app/src/main/res/ 中。
設置 APP圖標 進入 GD/android/app/sec/ 打開 AndroidManifest 文件，修改 android:icon 項，以下：
```
<applicatio>
        android:icon="@drawable/icon"
    </application>
```
設置 APP名稱 進入 GD/android/app/src/main/res/values/ 中，打開 strings.xml 文件，作以下修改：
```
<resources>
        <string name="app_name">逛丟學習</string>
    </resources>
```
OK,至此 Android 配置完畢。

目錄結構與命名規則

爲了方便理解，咱們這邊先不按照常規的React-native開發結構進行開發，後續章節再慢慢轉變
這邊咱們將文件分爲 main(入口)、home(首頁)、ht(海淘)、hourList(小時風雲榜) 4大部分，將相關的文件放入對應的文件夾，避免開發中頻繁切換文檔給新手帶來煩躁感
命名規則：
- 文件夾命名方式咱們就跟着 React-Native 默認的方式，採用 小寫 + 下劃線 進行命名
- 文件命名方式咱們採用 前綴(大寫) + 模塊名稱(帕斯卡) 的方式進行命名
- 函數、常量、變量等使用駝峯命名規則

目錄結構：

譯註：

駝峯命名規則：首字母小寫，後續單詞以大寫開頭，詳情點擊駝峯命名查看閱讀。

帕斯卡命名規則：和駝峯相似，只不過將首字母改成大寫，詳情點擊帕斯卡命名查看閱讀。

下劃線命名規則：就是使用下劃線分割單詞。

第三方框架

這邊來說下在 React-Native 中怎麼導入第三方框架
首先，第三方框架確定是要到 GitHub 找嘍。
在搜索框內搜索 react-native-tab-navigator 。
在下面的說明中告訴咱們了，使用終端 —— 進到工程的主目錄下 —— 複製命令行（）—— 回車 —— 等待下載完成就導入到工程中了。
到此，第三方框架導入完成，使用在下面會提到。

主體框架搭建

上面提到使用 TabBar 做爲主體框架，可是官方只提供了iOS端的 TabBarIOS ，時間緣由爲了加快開發進度，而且順帶講解 第三方框架使用 因此咱們使用 <react-native-tab-navigator>進行開發
既然要使用框架，確定要先引入框架文件。

// 引用第三方框架
   import TabNavigator from 'react-native-tab-navigator';

根據 使用說明 文檔能夠看出，使用方法和官方的 TabBarIOS 相似(不清楚的麻煩參考React Native 之 TabBarIOS和TabBarIOS.Item使用)，因此咱們把 三大模塊 添加進TabBar，而且各個模塊都是以 Navigator 的形式存在。

export default class GD extends Component {

    // ES6
    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            selectedTab:'home',
        };
      }

    // 返回TabBar的Item
    renderTabBarItem(title, selectedTab, image, selectedImage, component) {
        return(
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                title={title}
                selectedTitleStyle={{color:'black'}}
                renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
                renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
                onPress={() => this.setState({ selectedTab: selectedTab })}>
                    // 添加導航功能
                <Navigator
                        // 設置路由
                    initialRoute={{
                        name:selectedTab,
                        component:component
                    }}
                        
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />
                    }}
                />
            </TabNavigator.Item>
        );
    }

    render() {
        return (
            <TabNavigator>
                {/* 首頁 */}
                {this.renderTabBarItem("首頁", 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home)}
                {/* 海淘 */}
                {this.renderTabBarItem("海淘", 'ht', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', HT)}
                {/* 小時風雲榜 */}
                {this.renderTabBarItem("小時風雲榜", 'hourlist', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', HourList)}
            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    tabbarIconStyle: {
        width:Platform.OS === 'ios' ? 30 : 25,
        height:Platform.OS === 'ios' ? 30 : 25,
    }
});

至此，主體框架搭建完畢。

自定義導航欄樣式

從效果圖中能夠看出，導航欄的樣式都差很少，由於咱們前面已經設置了 Navigator ，這邊的話咱們還須要自定義 Navigator 的樣式，能夠看到全部的 Navigator 樣式都是相近的，因此這邊咱們就抽出來，讓全部的 Navigator 共用一個組件就能夠了。
那麼首先咱們在 main 文件夾中建立 GDCommunalNavBar 文件並初始化一下里面基本的內容
接着，咱們來看下首頁的導航欄，首頁導航欄分別有左中右三個按鈕，左邊爲半小時熱門，中間爲點擊下拉顯示支持篩選的平臺的列表，右邊則是商品搜索，一般 Navigator 也只有這3個組件，爲了使用者高度地自定義，這邊咱們只在 currencyNavBar 中設置3個組件的佈局，而後提供接口，獲取外部傳入的值，並在內部判斷是否須要建立相應的組件。

export default class GDCommunalNavBar extends Component {

    static propTypes = {
        leftItem:PropTypes.func,
        titleItem:PropTypes.func,
        rightItem:PropTypes.func,
    };

    // 左邊
    renderLeftItem() {
        if (this.props.leftItem === undefined) return;
        return this.props.leftItem();
    }

    // 中間
    renderTitleItem() {
        if (this.props.titleItem === undefined) return;
        return this.props.titleItem();
    }

    // 右邊
    renderRightItem() {
        if (this.props.rightItem === undefined) return;
        return this.props.rightItem();
    }

    render() {
        return (
            <View style={styles.container}>
                {/* 左邊 */}
                <View>
                    {this.renderLeftItem()}
                </View>
                {/* 中間 */}
                <View>
                    {this.renderTitleItem()}
                </View>
                {/* 右邊 */}
                <View>
                    {this.renderRightItem()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width:width,
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'white',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        borderBottomWidth:0.5,
        borderBottomColor:'gray',
        paddingTop:Platform.OS === 'ios' ? 15 : 0,
    },
});

這邊咱們就已經完成了 Navigator 的樣式，咱們到首頁來用一下，看好很差用，使用這邊就不說了（1.引用外部文件；2.<CommunalNavBar ...參數/>）

[Upload 自定義Navigator樣式.gif failed. Please try again.]

首頁半小時熱門

這邊咱們就先從 半小時熱門 開始，像這樣的數據展現，咱們確定是優先選擇 ListView ，其中，cell 的樣式分解以下：

咱們先將數據請求下來，肯定正確獲取到數據後，再來定義 cell 的樣式。
接下來咱們來自定義一下 cell 樣式

export default class GDCommunalNavBar extends Component {

    static propTypes = {
        image:PropTypes.string,
        title:PropTypes.string,
    };

    render() {
        return (
            <View style={styles.container}>
                {/* 左邊圖片 */}
                <Image source={{uri:this.props.image}} style={styles.imageStyle} />
                {/* 中間的文中 */}
                <View>
                    <Text numberOfLines={3} style={styles.titleStyle}>{this.props.title}</Text>
                </View>
                {/* 右邊的箭頭 */}
                <Image source={{uri:'icon_cell_rightArrow'}} style={styles.arrowStyle} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        backgroundColor:'white',
        height:100,
        width:width,
        borderBottomWidth:0.5,
        borderBottomColor:'gray',
        marginLeft:15

    },

    imageStyle: {
        width:70,
        height:70,
    },
    titleStyle: {
        width:width * 0.65,
    },
    arrowStyle: {
        width:10,
        height:10,
        marginRight:30
    }
});

好了，到這裏 cell 樣式也定義完成而且效果是同樣的。

export default class GDHalfHourHot extends Component {

    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
        };
        // 綁定
        this.fetchData = this.fetchData.bind(this);
      }

    // 網絡請求
    fetchData() {
        fetch('http://guangdiu.com/api/gethots.php')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data)
                });
            })
            .done()
    }

    popToHome() {
        this.props.navigator.pop();
    }

    // 返回中間按鈕
    renderTitleItem() {
        return(
            <Text style={styles.navbarTitleItemStyle}>近半小時熱門</Text>
        );
    }

    // 返回右邊按鈕
    renderRightItem() {
        return(
            <TouchableOpacity
                onPress={()=>{this.popToHome()}}
            >
                <Text style={styles.navbarRightItemStyle}>關閉</Text>
            </TouchableOpacity>
        );
    }

    // 返回每一行cell的樣式
    renderRow(rowData) {
        return(
            <CommunalHotCell
                image={rowData.image}
                title={rowData.title}
            />
        );
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return (
            <View style={styles.container}>
                {/* 導航欄樣式 */}
                <CommunalNavBar
                    titleItem = {() => this.renderTitleItem()}
                    rightItem = {() => this.renderRightItem()}
                />

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    showsHorizontalScrollIndicator={false}
                    style={styles.listViewStyle}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems: 'center',
    },

    navbarTitleItemStyle: {
        fontSize:17,
        color:'black',
        marginLeft:50
    },
    navbarRightItemStyle: {
        fontSize:17,
        color:'rgba(123,178,114,1.0)',
        marginRight:15
    },

    listViewStyle: {
        width:width,
    }
});

從效果圖中能夠看出，咱們還少了上面的提示標題，這邊很簡單，咱們也來快速完成一些

{/* 頂部提示 */}
    <View style={styles.headerPromptStyle}>
        <Text>根據每條折扣的點擊進行統計,每5分鐘更新一次</Text>
    </View>

樣式部分：

headerPromptStyle: {
        height:44,
        width:width,
        backgroundColor:'rgba(239,239,239,0.5)',
        justifyContent:'center',
        alignItems:'center'
    }

隱藏於顯示TabBar之通知的使用

配置TabBar隱藏與顯示條件

// ES6
    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            selectedTab:'home',
            isHiddenTabBar:false,   // 是否隱藏tabbar
        };
      }
      
   <TabNavigator
                tabBarStyle={this.state.isHiddenTabBar !== true ? {} : {height:0, overflow:'hidden'}}
                sceneStyle={this.state.isHiddenTabBar !== true ? {} : {paddingBottom:0}}
            >
                {/* 首頁 */}
                {this.renderTabBarItem("首頁", 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home)}
                {/* 海淘 */}
                {this.renderTabBarItem("海淘", 'ht', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', HT)}
                {/* 小時風雲榜 */}
                {this.renderTabBarItem("小時風雲榜", 'hourlist', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', HourList)}
            </TabNavigator>

這邊咱們引入新的知識 —— 通知
使用通知很簡單，首先須要註冊通知並在適當的地方進行銷燬

componentDidMount() {
        // 註冊通知
        this.subscription = DeviceEventEmitter.addListener('isHiddenTabBar', (data)=>{this.tongZhi(data)});
    }

    componentWillUnmount() {
        // 銷燬
        this.subscription.remove();
    }

接着在咱們須要的地方發送通知

componentWillMount() {
        // 發送通知
        DeviceEventEmitter.emit('isHiddenTabBar', true);
    }

    componentWillUnmount() {
        // 發送通知
        DeviceEventEmitter.emit('isHiddenTabBar', false);
    }