整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的發(fā)展，現(xiàn)在很多企業(yè)做網(wǎng)站開(kāi)發(fā)不僅是電腦端的網(wǎng)站，還包括了移動(dòng)端網(wǎng)站的開(kāi)發(fā)，移動(dòng)端網(wǎng)站開(kāi)發(fā)和pc端是有一定的區(qū)別，比如移動(dòng)端的頁(yè)面更小，移動(dòng)端的打開(kāi)和加載速度都遠(yuǎn)低于電腦端訪問(wèn)網(wǎng)站，其實(shí)除過(guò)這兩點(diǎn)，pc端網(wǎng)站的建設(shè)和移動(dòng)端網(wǎng)站開(kāi)發(fā)都是有很多的區(qū)別，今天我們一起來(lái)了解下。
移動(dòng)端網(wǎng)站和pc端的網(wǎng)站在設(shè)計(jì)風(fēng)格上是不太一樣的，很多人說(shuō)手機(jī)站不就是pc站的縮小版么，為什么還要不一樣？這里大家要注意，手機(jī)網(wǎng)站和pc網(wǎng)站的像素大小不同，另外一點(diǎn)就是手機(jī)屏幕操作和電腦操作是不一樣的，所以有些功能電腦網(wǎng)站操作很簡(jiǎn)單，但是手機(jī)站操作很麻煩，所以手機(jī)網(wǎng)站開(kāi)發(fā)就不能全部抄pc端網(wǎng)站。
另外一點(diǎn)就是手機(jī)網(wǎng)站開(kāi)發(fā)語(yǔ)言和pc端網(wǎng)站是不一樣的，以前手機(jī)網(wǎng)站的語(yǔ)言是HTML寫的，而現(xiàn)在已經(jīng)采用了HTML5技術(shù)，可以自適應(yīng)所有尺寸的手機(jī)屏幕，有著更強(qiáng)大的網(wǎng)頁(yè)表現(xiàn)能力，也優(yōu)于其他前端語(yǔ)言的aeo性能，讓企業(yè)能把握住移動(dòng)搜索引擎的流量入口。而css3的技術(shù)可以讓手機(jī)網(wǎng)站的布局字體、顏色和背景有更炫麗的效果。
做好手機(jī)網(wǎng)站的建設(shè)也更方便用戶去看，如果一個(gè)企業(yè)只有一個(gè)電腦端網(wǎng)站，沒(méi)有一個(gè)手機(jī)端的網(wǎng)站，那么手機(jī)訪問(wèn)的話打開(kāi)網(wǎng)站的頁(yè)面就是不完整的，因?yàn)槭謾C(jī)訪問(wèn)電腦網(wǎng)站是在是太大了，所以需要縮放，而如果有手機(jī)網(wǎng)站的話，就會(huì)自適應(yīng)成更適合手機(jī)網(wǎng)站訪問(wèn)的頁(yè)面，這樣看起來(lái)就更加的清楚，也更加的方便，這就是手機(jī)網(wǎng)站建設(shè)的重要性，如果企業(yè)要做移動(dòng)端營(yíng)銷，那么手機(jī)網(wǎng)站建設(shè)是很有必要的。
在對(duì)主流手機(jī)終端進(jìn)行統(tǒng)計(jì)得出，大部分手機(jī)的device-width為320px、360px、375px、384px、400px、414px，另外安卓pad的device-width為600px0px。手機(jī)屏幕分辨率寬度則在320px-1080px間，有少部分手機(jī)已經(jīng)達(dá)到1152px和1440px。PS:ipad訪問(wèn)移動(dòng)端建議跳轉(zhuǎn)去對(duì)應(yīng)的PC頁(yè)面。
css的計(jì)量單位有三種選擇：
px: 固定的相素值
em: 相對(duì)父級(jí)元素的font-size設(shè)置來(lái)作為當(dāng)前元素1em所代表的像素值，如父節(jié)點(diǎn)的font-size:10px，當(dāng)前節(jié)點(diǎn)的font-size:1.2em,則當(dāng)前節(jié)點(diǎn)的font-size實(shí)為12px;
rem：相對(duì)根節(jié)點(diǎn)html的font-size設(shè)置來(lái)作為當(dāng)前元素1rem所代表的像素值，與em的區(qū)別就是rem的基本度量單位與父節(jié)點(diǎn)無(wú)關(guān)，只與根節(jié)點(diǎn)font-size的設(shè)置有關(guān)，如設(shè)置html{font-size:10px;}后當(dāng)前dom所有節(jié)點(diǎn)的1rem都表示10px;
移動(dòng)端開(kāi)發(fā)中我們使用rem作為基本計(jì)量單位，同時(shí)將根節(jié)點(diǎn)默認(rèn)字號(hào)大小設(shè)為font-size:62.5%,因移動(dòng)端瀏覽器默認(rèn)字號(hào)大小為16px;16*62.5%剛好為10px; 具體設(shè)置方法及使用示例
html{font-size:62.5%;/*剛好為10px;*/}
#example{font-size:1.2rem}/*設(shè)置#example的字體大小為12px;*/
#example div{font-size:1.4rem; width:10rem;height:10rem}/*設(shè)置#example子節(jié)點(diǎn)div的字體大小為14px;寬度為100px;高度100px*/安卓下<textarea>標(biāo)簽的內(nèi)容字體大小不支持rem設(shè)置，如有需要使用響應(yīng)式及px單位設(shè)置其字體大小，暫時(shí)還未找到具體原因
在對(duì)主流手機(jī)終端進(jìn)行統(tǒng)計(jì)得出，大部分手機(jī)的device-width為320px、360px、375px、384px、400px、414px，另外安卓pad的device-width為600px0px。 手機(jī)屏幕分辨率寬度則在320px-1080px間，有少部分手機(jī)已經(jīng)達(dá)到1152px和1440px。PS:ipad訪問(wèn)移動(dòng)端建議跳轉(zhuǎn)去對(duì)應(yīng)的PC頁(yè)面。
在移動(dòng)端開(kāi)發(fā)中，我們使用如下viewport設(shè)置
<!--viewport的設(shè)置--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
注：device-width實(shí)際上并不等于設(shè)備寬度，而是css寬度，它是根據(jù)設(shè)備屏幕寬度和屏幕像素密度換算得出的用于網(wǎng)頁(yè)顯示的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;} 用于解決某些情況下出現(xiàn)閃屏的問(wèn)題，若無(wú)則不加*/
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設(shè)計(jì)稿上320px*200px字體大小為32px的區(qū)域樣式為：
html{ font-size: 312.5%; }
.div{
width:3.2rem;
height:2rem;
font-size:0.32rem
}主要處理短屏下縮放，以及初始化時(shí)固定頁(yè)面大小，防止豎屏下彈出鍵盤或橫屏?xí)r頁(yè)面發(fā)生縮放的情況
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+"%")); //單屏全屏布局時(shí)使用,短屏下自動(dòng)縮放
//$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//長(zhǎng)頁(yè)面時(shí)使用,不縮放
if(callback)callback();
}
function _onorientationchange(e){
if(window.orientation==90||window.orientation==-90){
$("#forhorview").css("display", "-webkit-box"); //顯示豎屏瀏覽提示框
}else{//豎屏下恢復(fù)默認(rèn)顯示效果
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);
})<!doctype html> <html> <head> <title>標(biāo)題</title> <meta name="keywords" content="關(guān)鍵字" /> <meta name="description" content="描述" /> <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="address=no" /> <!--for baidu 識(shí)別移動(dòng)端頁(yè)面并禁止百度轉(zhuǎn)碼--> <meta name="applicable-device"content="mobile"> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!--viewport 設(shè)置，如果頁(yè)面實(shí)際情況不允許縮放請(qǐng)加上,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>
在移動(dòng)端使用新的css3樣式代替原來(lái)在PC上的開(kāi)發(fā)習(xí)慣
新的布局實(shí)現(xiàn)方式:使用display:box、box-flex代替float\display：inline-block; 實(shí)現(xiàn)更強(qiáng)大、更完美的流體布局，尤其在寬度為100%的布局中，實(shí)現(xiàn)橫向并排元素寬度的自動(dòng)伸縮以及水平垂直居中平均分布、首尾分布排列等。
垂直居中的實(shí)現(xiàn)方式：使用display:-webkit-box;-webkit-box-align: center;實(shí)現(xiàn)垂直居中。
盡量使用border-radius，box-shadow,text-shadow等css3樣式實(shí)現(xiàn)諸如圓角、漸變色、盒子投影、字體投影,減少使用圖片。
對(duì)于單色的icon圖標(biāo)，我們將會(huì)整理出一套常用圖標(biāo)，并制作成字體，利用css3的@font-face使用自定義字體導(dǎo)入，這樣的話，可以像修改字體一樣隨意地修改圖標(biāo)的顏色、大小、背景色、特殊效果（如投影）等，而不再需要每一種顏色就需要切一份圖片。
利用-webkit-transform:rotate(90deg)來(lái)獲取旋轉(zhuǎn)了不同角度的icon，避免每個(gè)角度需要切一張圖片
在動(dòng)畫中，利用css3動(dòng)畫屬性如-webkit-transform:translate(10px,12px)來(lái)改變?cè)氐钠莆恢茫瑴p少使用left和top來(lái)做位移動(dòng)畫
pp開(kāi)發(fā)是一個(gè)非常有趣的事情，如果你試著開(kāi)發(fā)一個(gè)自己的app的話，你一定會(huì)愛(ài)上這項(xiàng)活動(dòng)。
編者按：React Native愈發(fā)火爆，如果你尚未接觸過(guò)，不如看看本文作者的入門指南，他會(huì)帶你體驗(yàn)基于RN平臺(tái)開(kāi)發(fā)一款電子商務(wù)搜索類App的奇妙旅程！本文編譯自Hackernoon，原文標(biāo)題為：Building an e-commerce search app with react native，推薦有一定編程基礎(chǔ)的讀者閱讀。
今天我們來(lái)聊一聊是如何在RN平臺(tái)開(kāi)發(fā)一款用于查找圖書數(shù)據(jù)庫(kù)的電子商務(wù)移動(dòng)app。如果你之前沒(méi)有使用過(guò)RN，那么現(xiàn)在就跟我一起開(kāi)啟你的移動(dòng)端Javascript開(kāi)發(fā)之旅吧。
2018年Javascript迎來(lái)了前所未有的發(fā)展，各種庫(kù)、框架、開(kāi)發(fā)工具都已經(jīng)發(fā)展的相當(dāng)?shù)某墒炝耍麄€(gè)社區(qū)也都在致力于使網(wǎng)上沖浪變得更加方便快捷。當(dāng)然，開(kāi)發(fā)過(guò)程中還是會(huì)存在一些bug，但是，如果你會(huì)用Javascript，那么這些小問(wèn)題就都不是事。你可以利用JS來(lái)制作web app、后臺(tái)服務(wù)器、移動(dòng)端app。
React Native不僅可以像Cordova/Ionic/Phonegap等利用WebView架構(gòu)和Javascript進(jìn)行移動(dòng)端APP開(kāi)發(fā)，而且支持native編譯，因此如果有需要也可以編寫native代碼。
你需要提前知道的事情
現(xiàn)在React Native非常的火，網(wǎng)上有很多的資源，所以你可以很容易從互聯(lián)網(wǎng)上獲取學(xué)習(xí)資源，因此，在你進(jìn)行RN程序開(kāi)發(fā)之前最好有一定的學(xué)習(xí)基礎(chǔ)。如果你是剛接觸這個(gè)項(xiàng)目，你可以先嘗試學(xué)習(xí)下官方教程，如果，你更愿意跟著視頻課程進(jìn)行學(xué)習(xí)，那么我會(huì)強(qiáng)烈推薦你去看Kent C. Dodds在egghead上的免費(fèi)課程“The Beginner’s Guide to ReactJS”
如果你對(duì)ES6+同樣了解的話，那就再好不過(guò)了。這有一本ES6的入門指南，有了它，你就能很快上手了。
作為一個(gè)初學(xué)者，雖然我建議你去認(rèn)真學(xué)習(xí)一下React，并開(kāi)發(fā)一些網(wǎng)絡(luò)版的APP，但是，如果你想抓緊時(shí)間上手開(kāi)發(fā)自己的程序的話，好好的了解React的基本架構(gòu)也是很有必要的，因?yàn)镽eact和React Native具有相通的架構(gòu)，只是他們最后的目標(biāo)不同，一個(gè)是服務(wù)于Web APP的，另一個(gè)是服務(wù)于native APP
如果，你使用React或React Native 進(jìn)行產(chǎn)品開(kāi)發(fā)，你將節(jié)省大部分的時(shí)間和精力，因?yàn)椋瑹o(wú)論是IOS還是Andriod平臺(tái)，社區(qū)上都有很多其他人共享的代碼。這也是為什么RN開(kāi)發(fā)平臺(tái)被像愛(ài)彼迎，臉書，照片墻，沃爾瑪和特斯拉等公司接受并利用它開(kāi)發(fā)移動(dòng)端app的原因。
基本概念
簡(jiǎn)單的介紹一下React Native是如何進(jìn)行工作的以及JavaScript的代碼是如何裝換成到一個(gè)強(qiáng)大的移動(dòng)端app。我們需要知道的是任何的一個(gè)React Native 應(yīng)用都是雙線程的：
1. 主線程
主線程管理著程序的用戶界面，處理包括手勢(shì)和觸摸在內(nèi)的所有本地交互。因?yàn)镽N允許在源代碼中添加android java，Objective C或swift代碼，所以這些代碼塊也可以在此線程中執(zhí)行。是不是感覺(jué)這樣開(kāi)發(fā)變得很舒服。
2. JavaScript 線程
這個(gè)線程執(zhí)行在JavaScript編譯器寫的JavaScript代碼（默認(rèn)狀態(tài)下是在iOS平臺(tái)中，并且通過(guò)構(gòu)件可以發(fā)送到Android設(shè)備上。）
為了使應(yīng)用程序正常工作，兩個(gè)線程之間就需要搭一座橋接器來(lái)實(shí)現(xiàn)交流，就像下面的示意圖展示的那樣。
React Native core architecture
正如名字所表示的，中間件可以幫助實(shí)現(xiàn)JavaScriprt線程和主線程之間的數(shù)據(jù)（信息）處理。這些信息可以被異步和批量處理。中間件可以保證JS代碼與本機(jī)模塊進(jìn)行對(duì)話并且與設(shè)備API交互。
現(xiàn)在我們對(duì)RN的結(jié)構(gòu)有了基本的了解，接下來(lái)我們來(lái)介紹實(shí)現(xiàn)的過(guò)程。
搭建開(kāi)發(fā)環(huán)境
如果你已經(jīng)安裝了RN并且對(duì)開(kāi)發(fā)系統(tǒng)比較了解，你就可以跳過(guò)去看下一部分內(nèi)容了。如果你是剛?cè)腴T的新手，那么你可以按照官方的安裝指南（會(huì)有更加詳細(xì)的介紹）去操作，或者按照我下面說(shuō)的去做。首先確認(rèn)你的電腦上已經(jīng)成功安裝了node和yarn模塊。我們將利用CRNA（create-react-native-app ）工具來(lái)創(chuàng)建模版,運(yùn)行下面的指令實(shí)現(xiàn)程序“HelloNative”
create-react-native-app HelloNative
cd HelloNative
npm start
這將為你啟動(dòng)一個(gè)可擴(kuò)展的服務(wù)器，并在終端輸出一段QR代碼。使用CRNA工具出現(xiàn)的警告只有：
it may not use the latest version of react-native
如果出現(xiàn)這個(gè)警告，你可以使用Expo CLI 或者 Expo XDE去解決。
然后安裝Expo 在你的iOS系統(tǒng)或者Android系統(tǒng)上，并將手機(jī)和你的電腦一樣聯(lián)接到網(wǎng)絡(luò)中。使用Expo app你就可以在你的手機(jī)上進(jìn)行操作啦，想想就很令人激動(dòng)把。就像下面圖顯示的一樣：
React Native app
你可以運(yùn)用yarn ios 和yarn android指令分別在iOS和Android模擬器上測(cè)試，這樣你就可以運(yùn)行你的React-Native app啦。
如果你知道如何打開(kāi)app中的擴(kuò)展菜單，你將會(huì)看到有支持熱加載和實(shí)時(shí)重載選項(xiàng)。這些可以使你可以迅速在Andriod環(huán)境下加載你的app
A closer look at the developer options
擴(kuò)展操作同時(shí)具有了debugging模塊，在后面的內(nèi)容中我們將進(jìn)行詳細(xì)的介紹。
調(diào)試模塊
遠(yuǎn)程調(diào)試JS程序可以讓我們查看相關(guān)的控制信息和錯(cuò)誤信息。這讓我們的開(kāi)發(fā)和調(diào)試過(guò)程變得更加容易，另外，你還需要安裝 React Native debugger
React Native Debugger in action
這是一個(gè)非常實(shí)用的工具，可以幫助我們查看React Native app中的模塊聲明和類樹(shù)，你也可以在上面查看和碼上你開(kāi)發(fā)的app需要運(yùn)用的模塊。
準(zhǔn)備階段
React Native提供了一些開(kāi)發(fā)app的基本模塊，你可以在list of available components here中找到React Native提供的不同平臺(tái)下對(duì)應(yīng)的功能模塊，這些模塊可以幫助你進(jìn)行開(kāi)發(fā)屬于你自己的app，這讓開(kāi)發(fā)過(guò)程變得更加簡(jiǎn)單。React Native支持fetch 功能，這樣使得開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中就可以像網(wǎng)頁(yè)一樣從服務(wù)器上獲取數(shù)據(jù)和處理http請(qǐng)求。
對(duì)于我們將要設(shè)計(jì)的搜索app，我們將使用能夠在短時(shí)間內(nèi)遍歷大量數(shù)據(jù)的NoSQL數(shù)據(jù)架構(gòu)進(jìn)行開(kāi)發(fā)。它將對(duì)以JSON為對(duì)象的所有文檔進(jìn)行全文搜索。
可能你以前沒(méi)有接觸過(guò)Elasticsearch，但是你不得不接受使用Elasticsearch是個(gè)趨勢(shì)。你可以從下面的介紹中學(xué)習(xí)相關(guān)的基礎(chǔ)。
Elasticsearch的起步并不是那樣的簡(jiǎn)單，設(shè)置環(huán)境、添加數(shù)據(jù)、查看數(shù)據(jù)等等操作對(duì)于一個(gè)初學(xué)者來(lái)講并不是一件簡(jiǎn)單的事，因此，Elasticsearch的社區(qū)里面提供了很多開(kāi)源的工具來(lái)幫助初學(xué)者進(jìn)行開(kāi)發(fā)。
· Importer 添加數(shù)據(jù)到Elasticsearch中
· Data Browser 以excel表格的形式查看Elasticsearch中的數(shù)據(jù)。
· Query Builder 組織管理關(guān)聯(lián)的Elasticsearch隊(duì)列。
在這些工具的幫助下，我們可以直接利用這些工具和React Native 去組建一個(gè)強(qiáng)大的移動(dòng)端圖書館app
你可以按照官網(wǎng)的指導(dǎo)安裝設(shè)計(jì)Elasticsearch服務(wù)器，或者你可以申請(qǐng)一個(gè)appbase.io 的賬號(hào)，appbase.io 提供了一個(gè)Elasticsearch的服務(wù)器，這樣就更加方便了，因此，我們就用appbase.io平臺(tái)開(kāi)始我們的開(kāi)發(fā)。
我已經(jīng)簡(jiǎn)單的創(chuàng)建了一個(gè)基本的數(shù)據(jù)搜索的app，你可以進(jìn)入下圖進(jìn)行查看。
Dataset of books
你可以利用最下面的 Clone this app選項(xiàng)復(fù)制已經(jīng)存在的模版作為你開(kāi)發(fā)的基礎(chǔ)。這些授權(quán)信任書可以幫助我們連接到UI上，我們?cè)谶@篇教程中要使開(kāi)發(fā)的app的授權(quán)信任模塊如下
{
app: "good-books-ds",
credentials: "nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d",
type: "good-books-ds"
}
開(kāi)啟 Reactive search之旅
我們將使用ReactiveSearch來(lái)進(jìn)行開(kāi)發(fā)，因?yàn)镽eactiveSearch是一個(gè)Elasticsearch上的UI模塊的React和React Native通用的開(kāi)源庫(kù)，它提供了一個(gè)豐富的資源庫(kù)、完善的配置環(huán)境以及架構(gòu)，這樣你就可以連接到任何一個(gè)Elasticsearch的服務(wù)器上，
為什么我們需要ReacttiveSearch呢？
ReactiveSearch提供了一整套連接到Elasticsearch服務(wù)器上的模塊，可以創(chuàng)建隊(duì)列、具有靈活直觀的特點(diǎn)。并且可以讓你的模塊可以與其他的模塊實(shí)現(xiàn)通信，比如說(shuō)你創(chuàng)建了一個(gè)A模塊，A模塊實(shí)現(xiàn)了升級(jí)更新，這樣需要B模塊可以獲取信息并且可以實(shí)現(xiàn)不依靠任何關(guān)聯(lián)額自主的實(shí)現(xiàn)更新。
Reactivesearch-native上有很多的nativeUI模塊，這些可以使你開(kāi)發(fā)app的UI 模塊的時(shí)候有所借鑒，讓你的app變得更加的美觀和智能。
開(kāi)發(fā)搜索app
我們需要在我們的React Native項(xiàng)目下利用下面的代碼安裝reactivesearch-native
yarn add @appbaseio/reactivesearch-native
全部的ReactiveSearch的模塊都被包裝在ReactiveBase 的容器中，
我們將使用這些在App.js中Adding ReactiveBase component React Native 中的Styling和網(wǎng)頁(yè)類似，我們這里采用的是Flex中的基本Styling，如果你之前沒(méi)有接觸過(guò)這個(gè)Flex的話呢，個(gè)人建議你可以嘗試從FlexBox Froggy開(kāi)始起步。
除了Stylesheet以外，我們的代碼中還使用了React Native中的兩個(gè)其他的模塊。
· View 在React Native中和html中的div元素差不多是一個(gè)容器，可以支持多種操作。
· Text 這個(gè)是React Native中可以查閱相關(guān)內(nèi)容的的模塊。
在我們?cè)O(shè)計(jì)的BookSearch app中，我們將需要嘗試Reactivesearch-native中的另外的兩個(gè)模塊：
1. Search box for searching the books:
我們這里將使用reactivesearch-native中的DataSearch模塊去實(shí)現(xiàn)多區(qū)域的搜索功能，其核心如下所示
<DataSearch
componentId="searchbox"
dataField={[
'original_title',
'original_title.search',
'authors',
'authors.search',
]}
placeholder="Search for books"
autosuggest={false}
/>
DataSearch使用起來(lái)相當(dāng)?shù)姆奖悖捎谄浔旧砭褪窃赿ataFied（s）的隊(duì)列中，因此這個(gè)模塊就可以輕松的幫助我們實(shí)現(xiàn)轉(zhuǎn)入到ReactiveBase模塊中，并且可以傳遞和接收一切索引的信息，這樣就不需要我們自己去編寫相關(guān)的隊(duì)列算法了。
2. Result List View for displaying the search results:
結(jié)果展示模塊
我們?cè)诮Y(jié)果的輸出上主要采用的是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: 通過(guò)name field去調(diào)整結(jié)果
· onData: 接收返回值為JSX相關(guān)結(jié)果的函數(shù)，這是我們常用來(lái)查看部分結(jié)果的方式。
如果你想讓你的app變得美觀，想要調(diào)整一些字體的話，可以在你的程序里面輸入下面的代碼
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'),
});
}
編后語(yǔ)：如果你很有興趣，還想了解更多，不妨去看看這兩個(gè)論壇，和更多朋友交流下你的想法：
1. ReactiveSearch GitHub repo
2. ReactiveSearch docs
原文鏈接：
https://hackernoon.com/building-an-e-commerce-search-app-with-react-native-2c87760a2315
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
