React Native入門——佈局實踐：開發京東client首頁（一）

時間 2020-06-06

標籤 react native 入門佈局實踐開發京東 client 首頁欄目 React 简体版

原文原文鏈接

有了一些對React Native開發的簡單瞭解，讓咱們從實戰出發。一塊兒來構建一個簡單的京東client。javascript

這個client是仿照以前版本號的京東client開發的Android版應用，來源於CSDN上的一位分享者，再次向他表示感謝！html

本文會對京東client首頁的佈局進行簡單的分析，並對搜索框部分的開發進行介紹，其它內容在後面的文章中繼續介紹。java

後繼文章：react

React Native入門——佈局實踐：開發京東client首頁（二）TabBar的構建
android

歡迎交流。ios

1.京東client首頁佈局分析

如圖所看到的，京東client首頁佈局基本分爲下面幾個部分：git

（1）頭部：搜索欄。由京東logo、搜索輸入框和掃描button組成github

（2）內容部分：父級的元素中爲ListView或ScrollView，可滑動，當中包含一個輪播圖、一組功能button和秒殺、拍賣商品列表web

（3）底部：TabBar，用於切換頁面react-native

2.建立project和相關文件、文件夾

首先，咱們利用react-native init命令建立一個名爲JdApp（固然也可以本身起）的React Nativeproject（詳細操做請參考： http://blog.csdn.net/yuanguozhengjust/article/details/50468050），項目結構例如如下圖所看到的：

依據咱們剛纔對京東client結構的分析。眼下可以先新建幾個文件，用於拆分代碼。詳細方案例如如下：

images文件夾：用於存放相關圖片

Header.js：用於構建頭部搜索欄（本文主要介紹此文件裏的內容）

MainScreen.js：主屏幕文件。起到最外層控制做用

HomePage.js：首頁文件，用於構建輪播圖、功能button、特價列表等

3.調研相關控件

眼下App中需要用到輪播圖、Tab這兩個高級控件，而React Native原生的控件僅有TabBarIOS可供iOS平臺使用，不能知足咱們的需求，依據在Github上搜索的結果。咱們可以選用下面幾個第三方控件進行開發：

react-native-viewpager：可實現輪播圖效果，地址： https://github.com/race604/react-native-viewpager

react-native-tab-navigator：可用於構建Tab，並可以輕鬆地進行頁面切換，地址： https://github.com/exponentjs/react-native-tab-navigator

有興趣的讀者。還可以自行構建Tab和Swiper這樣的控件，作一個符合項目需求的控件並不難，但想要擴展性、通用性更強，不是一件easy的事情。

4.分析搜索欄的基本佈局

頭部的搜索欄。分爲三個部分：logo、輸入框、掃碼button。

當中。logo可以使用Image控件

輸入框稍複雜，外層是一個圓角的View，其內部左側是一個Image。用於展現放大鏡Icon，中間爲一個TextInput控件用於輸入，右側爲一個Image，用於展現語音搜索Icon

右側掃碼button也比較簡單。僅爲一個Image

那麼依據FlexBox佈局原則。可以按下面方式進行佈局：

這裏特別說明一下。由於React Native不支持本身主動計算Image等View的大小（參見： http://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything）。因此咱們不能像Android的XML那樣，設置爲wrap_content，必須爲Image指定寬度和高度。而由於React Native使用的是相似Android dp的像素，因此請依據設計圖的尺寸自行計算，這裏推薦一個站點： https://pixplicity.com/dp-px-converter/

5.代碼實現

肯定好了搜索欄的佈局，那麼咱們就開始詳細使用JavaScript代碼進行實現。首先新建一個Header.js的文件，並引入咱們需要用到的控件

'use strict';

import React, {
    Component
    Image,
    TextInput
    View,
    StyleSheet
} from 'react-native';

接着聲明類和樣式，之因此使用export，是因爲要在其它類中使用（如：MainScreen）

export default class Header extends Component {

}

const styles = StyleSheet.create({
    
});

而後在Header類的render()方法中編寫JSX代碼，在StyleSheet.create()方法中。編寫類CSS的樣式，例如如下：

export default class Header extends Component {
    render() {
        return (
            <View style={styles.container}>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: Platform.OS === 'ios' ?
 20 : 0,   // 處理iOS狀態欄
        height: Platform.OS === 'ios' ? 68 : 48,   // 處理iOS狀態欄
        backgroundColor: '#d74047',
        alignItems: 'center'
    }});

而後咱們在模擬器或者真機上跑一下，看看效果

嗯，不錯，貌似是咱們想要的效果。接着把圖片資源導入項目中去。很是easy，僅僅需要在文件夾建立文件夾，將圖片複製進去。WebStorm等IDE就能夠本身主動識別

依據咱們以前的分析，完畢樣式表的設計。例如如下：

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',   // 水平排布
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 處理iOS狀態欄
        height: Platform.OS === 'ios' ? 68 : 48,   // 處理iOS狀態欄
        backgroundColor: '#d74047',
        alignItems: 'center'  // 使元素垂直居中排布, 當flexDirection爲column時, 爲水平居中
    },
    logo: {
        height: 24,
        width: 64,
        resizeMode: 'stretch'  // 設置拉伸模式
    },
    searchBox: {
        height: 30,
        flexDirection: 'row',
        flex: 1,  // 類似於android中的layout_weight,設置爲1即本身主動拉伸填充
        borderRadius: 5,  // 設置圓角邊
        backgroundColor: 'white',
        alignItems: 'center',
        marginLeft: 8,
        marginRight: 12
    },
    scanIcon: {
        height: 26.7,
        width: 26.7,
        resizeMode: 'stretch'
    },
    searchIcon: {
        marginLeft: 6,
        marginRight: 6,
        width: 16.7,
        height: 16.7,
        resizeMode: 'stretch'
    },
    voiceIcon: {
        marginLeft: 5,
        marginRight: 8,
        width: 15,
        height: 20,
        resizeMode: 'stretch'
    },
    inputText: {
        flex: 1,
        backgroundColor: 'transparent',
        fontSize: 14
    }
});

請認真注意上面代碼中的凝視，標有凝視的地方。即爲和普通iOS、Android開發不太同樣的地方！
由於咱們已經將父級的元素中的排布方向改成水平，因此咱們僅僅需將需要展示的元素放入<View>的子元素就能夠，例如如下代碼所看到的：

export default class Header extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image source={require('./images/header/header_logo.png')} style={styles.logo}/>
                <View style={styles.searchBox}>
                    <Image source={require('./images/header/icon_search.png')} style={styles.searchIcon}/>
                    <TextInput
                        keyboardType='web-search'
                        placeholder='搜索京東商品/店鋪'
                        style={styles.inputText}/>
                    <Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon}/>
                </View>
                <Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon}/>
            </View>
        )
    }
}

需要注意的是：

1.style的使用，當使用StyleSheet建立的樣式時，外層僅僅需要一層{}，而直接聲明需要再加一層，即直接聲明瞭匿名變量

2.Image的source可以使用網絡圖片或本地資源，使用本地資源時，相似require.js的包引用，而使用網絡資源時，用法例如如下：source={{uri:'http://xxxxxxx'}}

3.TextInput的鍵盤類型可以使用keyboardType進行設置。佔位字符使用placeholder設置，詳細請參見官方文檔

這時在模擬器或真機上Reload JS一下。就可以看到咱們想要的界面了：

項目源代碼及資源文件：https://github.com/yuanguozheng/JdApp

本次Commit：https://github.com/yuanguozheng/JdApp/commit/b34add1224fc02d25bd7a188e2cade73c122f59c

轉載請註明出處：http://blog.csdn.net/yuanguozhengjust/article/details/50538651