容導讀

在對主流手機終端進行統計得出，大部分手機的device-width為320px、360px、375px、384px、400px、414px，另外安卓pad的device-width為600px0px。手機屏幕分辨率寬度則在320px-1080px間，有少部分手機已經達到1152px和1440px。PS:ipad訪問移動端建議跳轉去對應的PC頁面。

計量單位的使用

css的計量單位有三種選擇：

• px: 固定的相素值

• em: 相對父級元素的font-size設置來作為當前元素1em所代表的像素值，如父節點的font-size:10px，當前節點的font-size:1.2em,則當前節點的font-size實為12px;

• rem：相對根節點html的font-size設置來作為當前元素1rem所代表的像素值，與em的區別就是rem的基本度量單位與父節點無關，只與根節點font-size的設置有關，如設置html{font-size:10px;}后當前dom所有節點的1rem都表示10px;

移動端開發中我們使用rem作為基本計量單位，同時將根節點默認字號大小設為font-size:62.5%,因移動端瀏覽器默認字號大小為16px;16*62.5%剛好為10px; 具體設置方法及使用示例

html{font-size:62.5%;/*剛好為10px;*/}
#example{font-size:1.2rem}/*設置#example的字體大小為12px;*/
#example div{font-size:1.4rem; width:10rem;height:10rem}/*設置#example子節點div的字體大小為14px;寬度為100px;高度100px*/

• 安卓下<textarea>標簽的內容字體大小不支持rem設置，如有需要使用響應式及px單位設置其字體大小，暫時還未找到具體原因

不同分辨率的終端

在對主流手機終端進行統計得出，大部分手機的device-width為320px、360px、375px、384px、400px、414px，另外安卓pad的device-width為600px0px。 手機屏幕分辨率寬度則在320px-1080px間，有少部分手機已經達到1152px和1440px。PS:ipad訪問移動端建議跳轉去對應的PC頁面。

viewport設置

在移動端開發中，我們使用如下viewport設置

<!--viewport的設置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

注：device-width實際上并不等于設備寬度，而是css寬度，它是根據設備屏幕寬度和屏幕像素密度換算得出的用于網頁顯示的css寬度

移動端設計稿750px*1134px的制作規范

css部分

/*reset.less*/
/* CSS Document */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; font-size:62.5%;}
ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none; color: #2a2a2a; }
input{ -webkit-appearance:none;outline:none}
*{outline: none; webkit-focus-ring-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
.hide{display:none;}
body, html {width: 100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解決某些情況下出現閃屏的問題，若無則不加*/
body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
p,a,li{font-size:1.2rem; color:#434343}
html{ font-size: 312.5%; } 
@media screen and (max-width:359px) and (orientation:portrait) {
 html { font-size: 266.67%; } 
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
 html { font-size: 300%; } 
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
 html { font-size: 320%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
 html { font-size: 333.33%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
 html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
 html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
 html{ font-size:400%;}
} 
@media screen and (min-width:640px) and (orientation:portrait){
 html{ font-size:533.33%;}
}

例如750px設計稿上320px*200px字體大小為32px的區域樣式為：

html{ font-size: 312.5%; } 
.div{
 width:3.2rem;
 height:2rem;
 font-size:0.32rem 
}

js部分

主要處理短屏下縮放，以及初始化時固定頁面大小，防止豎屏下彈出鍵盤或橫屏時頁面發生縮放的情況

 var initScreen=function(callback){//初始化html font-size
 $("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%")); //單屏全屏布局時使用,短屏下自動縮放
 //$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//長頁面時使用,不縮放
 if(callback)callback();
 }


function _onorientationchange(e){
 if(window.orientation==90||window.orientation==-90){
 $("#forhorview").css("display", "-webkit-box"); //顯示豎屏瀏覽提示框
 }else{//豎屏下恢復默認顯示效果
 var st=setTimeout(initScreen,300);
 $("#forhorview").css("display", "none"); 
 }
 _resize(e);
}
$(function(){
 initScreen();
 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function(e){_onorientationchange(e);}, false);
})

html示例

<!doctype html>
<html>
 <head>
 <title>標題</title>
 <meta name="keywords" content="關鍵字" />
 <meta name="description" content="描述" />
 <meta name="format-detection" content="telephone=no" />
 <meta name="format-detection" content="address=no" />
 <!--for baidu 識別移動端頁面并禁止百度轉碼-->
 <meta name="applicable-device"content="mobile"> 
 <meta http-equiv="Cache-Control" content="no-transform" />
 <meta http-equiv="Cache-Control" content="no-siteapp" />
 <!--viewport 設置，如果頁面實際情況不允許縮放請加上,user-scalable=no-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <link rel="stylesheet" type="text/css" href="css/index.less" />
 </head>
 <body>
 
 <div id="forhorview">
 <p>推薦使用豎屏瀏覽哦~</p>
 </div>

 <script src="js/zepto.min.js"></script>
 </body>
</html>

移動端開發細節和優化

在移動端使用新的css3樣式代替原來在PC上的開發習慣

• 新的布局實現方式:使用display:box、box-flex代替float\display：inline-block; 實現更強大、更完美的流體布局，尤其在寬度為100%的布局中，實現橫向并排元素寬度的自動伸縮以及水平垂直居中平均分布、首尾分布排列等。

• 垂直居中的實現方式：使用display:-webkit-box;-webkit-box-align: center;實現垂直居中。

• 盡量使用border-radius，box-shadow,text-shadow等css3樣式實現諸如圓角、漸變色、盒子投影、字體投影,減少使用圖片。

• 對于單色的icon圖標，我們將會整理出一套常用圖標，并制作成字體，利用css3的@font-face使用自定義字體導入，這樣的話，可以像修改字體一樣隨意地修改圖標的顏色、大小、背景色、特殊效果（如投影）等，而不再需要每一種顏色就需要切一份圖片。

• 利用-webkit-transform:rotate(90deg)來獲取旋轉了不同角度的icon，避免每個角度需要切一張圖片

• 在動畫中，利用css3動畫屬性如-webkit-transform:translate(10px,12px)來改變元素的偏移位置，減少使用left和top來做位移動畫

pp開發是一個非常有趣的事情，如果你試著開發一個自己的app的話，你一定會愛上這項活動。

編者按：React Native愈發火爆，如果你尚未接觸過，不如看看本文作者的入門指南，他會帶你體驗基于RN平臺開發一款電子商務搜索類App的奇妙旅程！本文編譯自Hackernoon，原文標題為：Building an e-commerce search app with react native，推薦有一定編程基礎的讀者閱讀。

今天我們來聊一聊是如何在RN平臺開發一款用于查找圖書數據庫的電子商務移動app。如果你之前沒有使用過RN，那么現在就跟我一起開啟你的移動端Javascript開發之旅吧。

2018年Javascript迎來了前所未有的發展，各種庫、框架、開發工具都已經發展的相當的成熟了，整個社區也都在致力于使網上沖浪變得更加方便快捷。當然，開發過程中還是會存在一些bug，但是，如果你會用Javascript，那么這些小問題就都不是事。你可以利用JS來制作web app、后臺服務器、移動端app。

React Native不僅可以像Cordova/Ionic/Phonegap等利用WebView架構和Javascript進行移動端APP開發，而且支持native編譯，因此如果有需要也可以編寫native代碼。

你需要提前知道的事情

現在React Native非常的火，網上有很多的資源，所以你可以很容易從互聯網上獲取學習資源，因此，在你進行RN程序開發之前最好有一定的學習基礎。如果你是剛接觸這個項目，你可以先嘗試學習下官方教程，如果，你更愿意跟著視頻課程進行學習，那么我會強烈推薦你去看Kent C. Dodds在egghead上的免費課程“The Beginner’s Guide to ReactJS”

如果你對ES6+同樣了解的話，那就再好不過了。這有一本ES6的入門指南，有了它，你就能很快上手了。

作為一個初學者，雖然我建議你去認真學習一下React，并開發一些網絡版的APP，但是，如果你想抓緊時間上手開發自己的程序的話，好好的了解React的基本架構也是很有必要的，因為React和React Native具有相通的架構，只是他們最后的目標不同，一個是服務于Web APP的，另一個是服務于native APP

如果，你使用React或React Native 進行產品開發，你將節省大部分的時間和精力，因為，無論是IOS還是Andriod平臺，社區上都有很多其他人共享的代碼。這也是為什么RN開發平臺被像愛彼迎，臉書，照片墻，沃爾瑪和特斯拉等公司接受并利用它開發移動端app的原因。

基本概念

簡單的介紹一下React Native是如何進行工作的以及JavaScript的代碼是如何裝換成到一個強大的移動端app。我們需要知道的是任何的一個React Native 應用都是雙線程的：

1. 主線程

主線程管理著程序的用戶界面，處理包括手勢和觸摸在內的所有本地交互。因為RN允許在源代碼中添加android java，Objective C或swift代碼，所以這些代碼塊也可以在此線程中執行。是不是感覺這樣開發變得很舒服。

2. JavaScript 線程

這個線程執行在JavaScript編譯器寫的JavaScript代碼（默認狀態下是在iOS平臺中，并且通過構件可以發送到Android設備上。）

為了使應用程序正常工作，兩個線程之間就需要搭一座橋接器來實現交流，就像下面的示意圖展示的那樣。

React Native core architecture

正如名字所表示的，中間件可以幫助實現JavaScriprt線程和主線程之間的數據（信息）處理。這些信息可以被異步和批量處理。中間件可以保證JS代碼與本機模塊進行對話并且與設備API交互。

現在我們對RN的結構有了基本的了解，接下來我們來介紹實現的過程。

搭建開發環境

如果你已經安裝了RN并且對開發系統比較了解，你就可以跳過去看下一部分內容了。如果你是剛入門的新手，那么你可以按照官方的安裝指南（會有更加詳細的介紹）去操作，或者按照我下面說的去做。首先確認你的電腦上已經成功安裝了node和yarn模塊。我們將利用CRNA（create-react-native-app ）工具來創建模版,運行下面的指令實現程序“HelloNative”

create-react-native-app HelloNative

cd HelloNative

npm start

這將為你啟動一個可擴展的服務器，并在終端輸出一段QR代碼。使用CRNA工具出現的警告只有：

it may not use the latest version of react-native

如果出現這個警告，你可以使用Expo CLI 或者 Expo XDE去解決。

然后安裝Expo 在你的iOS系統或者Android系統上，并將手機和你的電腦一樣聯接到網絡中。使用Expo app你就可以在你的手機上進行操作啦，想想就很令人激動把。就像下面圖顯示的一樣：

React Native app

你可以運用yarn ios 和yarn android指令分別在iOS和Android模擬器上測試，這樣你就可以運行你的React-Native app啦。

如果你知道如何打開app中的擴展菜單，你將會看到有支持熱加載和實時重載選項。這些可以使你可以迅速在Andriod環境下加載你的app

A closer look at the developer options

擴展操作同時具有了debugging模塊，在后面的內容中我們將進行詳細的介紹。

調試模塊

遠程調試JS程序可以讓我們查看相關的控制信息和錯誤信息。這讓我們的開發和調試過程變得更加容易，另外，你還需要安裝 React Native debugger

React Native Debugger in action

這是一個非常實用的工具，可以幫助我們查看React Native app中的模塊聲明和類樹，你也可以在上面查看和碼上你開發的app需要運用的模塊。

準備階段

React Native提供了一些開發app的基本模塊，你可以在list of available components here中找到React Native提供的不同平臺下對應的功能模塊，這些模塊可以幫助你進行開發屬于你自己的app，這讓開發過程變得更加簡單。React Native支持fetch 功能，這樣使得開發人員在開發過程中就可以像網頁一樣從服務器上獲取數據和處理http請求。

對于我們將要設計的搜索app，我們將使用能夠在短時間內遍歷大量數據的NoSQL數據架構進行開發。它將對以JSON為對象的所有文檔進行全文搜索。

可能你以前沒有接觸過Elasticsearch，但是你不得不接受使用Elasticsearch是個趨勢。你可以從下面的介紹中學習相關的基礎。

Elasticsearch的起步并不是那樣的簡單，設置環境、添加數據、查看數據等等操作對于一個初學者來講并不是一件簡單的事，因此，Elasticsearch的社區里面提供了很多開源的工具來幫助初學者進行開發。

· Importer 添加數據到Elasticsearch中

· Data Browser 以excel表格的形式查看Elasticsearch中的數據。

· Query Builder 組織管理關聯的Elasticsearch隊列。

在這些工具的幫助下，我們可以直接利用這些工具和React Native 去組建一個強大的移動端圖書館app

你可以按照官網的指導安裝設計Elasticsearch服務器，或者你可以申請一個appbase.io 的賬號，appbase.io 提供了一個Elasticsearch的服務器，這樣就更加方便了，因此，我們就用appbase.io平臺開始我們的開發。

我已經簡單的創建了一個基本的數據搜索的app，你可以進入下圖進行查看。

Dataset of books

你可以利用最下面的 Clone this app選項復制已經存在的模版作為你開發的基礎。這些授權信任書可以幫助我們連接到UI上，我們在這篇教程中要使開發的app的授權信任模塊如下

{

app: "good-books-ds",

credentials: "nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d",

type: "good-books-ds"

}

開啟 Reactive search之旅

我們將使用ReactiveSearch來進行開發，因為ReactiveSearch是一個Elasticsearch上的UI模塊的React和React Native通用的開源庫，它提供了一個豐富的資源庫、完善的配置環境以及架構，這樣你就可以連接到任何一個Elasticsearch的服務器上，

為什么我們需要ReacttiveSearch呢？

ReactiveSearch提供了一整套連接到Elasticsearch服務器上的模塊，可以創建隊列、具有靈活直觀的特點。并且可以讓你的模塊可以與其他的模塊實現通信，比如說你創建了一個A模塊，A模塊實現了升級更新，這樣需要B模塊可以獲取信息并且可以實現不依靠任何關聯額自主的實現更新。

Reactivesearch-native上有很多的nativeUI模塊，這些可以使你開發app的UI 模塊的時候有所借鑒，讓你的app變得更加的美觀和智能。

開發搜索app

我們需要在我們的React Native項目下利用下面的代碼安裝reactivesearch-native

yarn add @appbaseio/reactivesearch-native

全部的ReactiveSearch的模塊都被包裝在ReactiveBase 的容器中，

我們將使用這些在App.js中Adding ReactiveBase component React Native 中的Styling和網頁類似，我們這里采用的是Flex中的基本Styling，如果你之前沒有接觸過這個Flex的話呢，個人建議你可以嘗試從FlexBox Froggy開始起步。

除了Stylesheet以外，我們的代碼中還使用了React Native中的兩個其他的模塊。

· View 在React Native中和html中的div元素差不多是一個容器，可以支持多種操作。

· Text 這個是React Native中可以查閱相關內容的的模塊。

在我們設計的BookSearch app中，我們將需要嘗試Reactivesearch-native中的另外的兩個模塊：

1. Search box for searching the books:

我們這里將使用reactivesearch-native中的DataSearch模塊去實現多區域的搜索功能，其核心如下所示

<DataSearch

componentId="searchbox"

dataField={[

'original_title',

'original_title.search',

'authors',

'authors.search',

]}

placeholder="Search for books"

autosuggest={false}

/>

DataSearch使用起來相當的方便，由于其本身就是在dataFied（s）的隊列中，因此這個模塊就可以輕松的幫助我們實現轉入到ReactiveBase模塊中，并且可以傳遞和接收一切索引的信息，這樣就不需要我們自己去編寫相關的隊列算法了。

2. Result List View for displaying the search results:

結果展示模塊

我們在結果的輸出上主要采用的是reactivesearch-native 中的ReactiveList模塊：

<ReactiveList

componentId="results"

dataField="original_title"

size={7}

showResultStats={false}

pagination={true}

react={{

and: "searchbox"

}}

onData={(res) => (

<View style={styles.result}>

<Image source={{ uri: res.image }} style={styles.image} />

<View style={styles.item}>

<Text style={styles.title}>{res.original_title}</Text>

<Text>{res.authors}</Text>

</View>

</View>

)}

/>

上面的代碼是如何工作的呢？

· dataField: 通過name field去調整結果

· onData: 接收返回值為JSX相關結果的函數，這是我們常用來查看部分結果的方式。

如果你想讓你的app變得美觀，想要調整一些字體的話，可以在你的程序里面輸入下面的代碼

async componentWillMount() {

await Expo.Font.loadAsync({

Roboto: require('native-base/Fonts/Roboto.ttf'),

Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),

Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),

});

}

編后語：如果你很有興趣，還想了解更多，不妨去看看這兩個論壇，和更多朋友交流下你的想法：

1. ReactiveSearch GitHub repo

2. ReactiveSearch docs

原文鏈接：

https://hackernoon.com/building-an-e-commerce-search-app-with-react-native-2c87760a2315