&

App開發(fā)是一個(gè)非常有趣的事情，如果你試著開發(fā)一個(gè)自己的app的話，你一定會(huì)愛上這項(xiàng)活動(dòng)。

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

今天我們來聊一聊是如何在RN平臺(tái)開發(fā)一款用于查找圖書數(shù)據(jù)庫(kù)的電子商務(wù)移動(dòng)app。如果你之前沒有使用過RN，那么現(xiàn)在就跟我一起開啟你的移動(dòng)端Javascript開發(fā)之旅吧。

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

2018年Javascript迎來了前所未有的發(fā)展，各種庫(kù)、框架、開發(fā)工具都已經(jīng)發(fā)展的相當(dāng)?shù)某墒炝?，整個(gè)社區(qū)也都在致力于使網(wǎng)上沖浪變得更加方便快捷。當(dāng)然，開發(fā)過程中還是會(huì)存在一些bug，但是，如果你會(huì)用Javascript，那么這些小問題就都不是事。你可以利用JS來制作web app、后臺(tái)服務(wù)器、移動(dòng)端app。

React Native不僅可以像Cordova/Ionic/Phonegap等利用WebView架構(gòu)和Javascript進(jìn)行移動(dòng)端APP開發(fā)，而且支持native編譯，因此如果有需要也可以編寫native代碼。

你需要提前知道的事情

現(xiàn)在React Native非常的火，網(wǎng)上有很多的資源，所以你可以很容易從互聯(lián)網(wǎng)上獲取學(xué)習(xí)資源，因此，在你進(jìn)行RN程序開發(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 同樣了解的話，那就再好不過了。這有一本ES6的入門指南，有了它，你就能很快上手了。

作為一個(gè)初學(xué)者，雖然我建議你去認(rèn)真學(xué)習(xí)一下React，并開發(fā)一些網(wǎng)絡(luò)版的APP，但是，如果你想抓緊時(shí)間上手開發(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)品開發(fā)，你將節(jié)省大部分的時(shí)間和精力，因?yàn)?，無論是IOS還是Andriod平臺(tái)，社區(qū)上都有很多其他人共享的代碼。這也是為什么RN開發(fā)平臺(tá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í)行。是不是感覺這樣開發(fā)變得很舒服。

2. JavaScript 線程

這個(gè)線程執(zhí)行在JavaScript編譯器寫的JavaScript代碼（默認(rèn)狀態(tài)下是在iOS平臺(tái)中，并且通過構(gòu)件可以發(fā)送到Android設(shè)備上。）

為了使應(yīng)用程序正常工作，兩個(gè)線程之間就需要搭一座橋接器來實(shí)現(xiàn)交流，就像下面的示意圖展示的那樣。

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

React Native core architecture

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

現(xiàn)在我們對(duì)RN的結(jié)構(gòu)有了基本的了解，接下來我們來介紹實(shí)現(xiàn)的過程。

搭建開發(fā)環(huán)境

如果你已經(jīng)安裝了RN并且對(duì)開發(fā)系統(tǒng)比較了解，你就可以跳過去看下一部分內(nèi)容了。如果你是剛?cè)腴T的新手，那么你可以按照官方的安裝指南（會(huì)有更加詳細(xì)的介紹）去操作，或者按照我下面說的去做。首先確認(rèn)你的電腦上已經(jīng)成功安裝了node和yarn模塊。我們將利用CRNA（create-react-native-app ）工具來創(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)把。就像下面圖顯示的一樣：

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

React Native app

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

如果你知道如何打開app中的擴(kuò)展菜單，你將會(huì)看到有支持熱加載和實(shí)時(shí)重載選項(xiàng)。這些可以使你可以迅速在Andriod環(huán)境下加載你的app

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

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ò)誤信息。這讓我們的開發(fā)和調(diào)試過程變得更加容易，另外，你還需要安裝 React Native debugger

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

React Native Debugger in action

這是一個(gè)非常實(shí)用的工具，可以幫助我們查看React Native app中的模塊聲明和類樹，你也可以在上面查看和碼上你開發(fā)的app需要運(yùn)用的模塊。

準(zhǔn)備階段

React Native提供了一些開發(fā)app的基本模塊，你可以在list of available components here中找到React Native提供的不同平臺(tái)下對(duì)應(yīng)的功能模塊，這些模塊可以幫助你進(jìn)行開發(fā)屬于你自己的app，這讓開發(fā)過程變得更加簡(jiǎn)單。React Native支持fetch 功能，這樣使得開發(fā)人員在開發(fā)過程中就可以像網(wǎng)頁一樣從服務(wù)器上獲取數(shù)據(jù)和處理http請(qǐng)求。

對(duì)于我們將要設(shè)計(jì)的搜索app，我們將使用能夠在短時(shí)間內(nèi)遍歷大量數(shù)據(jù)的NoSQL數(shù)據(jù)架構(gòu)進(jìn)行開發(fā)。它將對(duì)以JSON為對(duì)象的所有文檔進(jìn)行全文搜索。

可能你以前沒有接觸過Elasticsearch，但是你不得不接受使用Elasticsearch是個(gè)趨勢(shì)。你可以從下面的介紹中學(xué)習(xí)相關(guān)的基礎(chǔ)。

Elasticsearch的起步并不是那樣的簡(jiǎn)單，設(shè)置環(huán)境、添加數(shù)據(jù)、查看數(shù)據(jù)等等操作對(duì)于一個(gè)初學(xué)者來講并不是一件簡(jiǎn)單的事，因此，Elasticsearch的社區(qū)里面提供了很多開源的工具來幫助初學(xué)者進(jìn)行開發(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)開始我們的開發(fā)。

我已經(jīng)簡(jiǎn)單的創(chuàng)建了一個(gè)基本的數(shù)據(jù)搜索的app，你可以進(jìn)入下圖進(jìn)行查看。

如何零基礎(chǔ)開發(fā)一款電商 App？（電商app開發(fā)教程）

Dataset of books

你可以利用最下面的 Clone this app選項(xiàng)復(fù)制已經(jīng)存在的模版作為你開發(fā)的基礎(chǔ)。這些授權(quán)信任書可以幫助我們連接到UI上，我們?cè)谶@篇教程中要使開發(fā)的app的授權(quán)信任模塊如下

{

app: “good-books-ds”,

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

type: “good-books-ds”

}

開啟 Reactive search之旅

我們將使用ReactiveSearch來進(jìn)行開發(fā)，因?yàn)镽eactiveSearch是一個(gè)Elasticsearch上的UI模塊的React和React Native通用的開源庫(kù)，它提供了一個(gè)豐富的資源庫(kù)、完善的配置環(huán)境以及架構(gòu)，這樣你就可以連接到任何一個(gè)Elasticsearch的服務(wù)器上，

為什么我們需要ReacttiveSearch呢？

ReactiveSearch提供了一整套連接到Elasticsearch服務(wù)器上的模塊，可以創(chuàng)建隊(duì)列、具有靈活直觀的特點(diǎn)。并且可以讓你的模塊可以與其他的模塊實(shí)現(xiàn)通信，比如說你創(chuàng)建了一個(gè)A模塊，A模塊實(shí)現(xiàn)了升級(jí)更新，這樣需要B模塊可以獲取信息并且可以實(shí)現(xiàn)不依靠任何關(guān)聯(lián)額自主的實(shí)現(xiàn)更新。

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

開發(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)頁類似，我們這里采用的是Flex中的基本Styling，如果你之前沒有接觸過這個(gè)Flex的話呢，個(gè)人建議你可以嘗試從FlexBox Froggy開始起步。

除了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使用起來相當(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: 通過name field去調(diào)整結(jié)果

· onData: 接收返回值為JSX相關(guān)結(jié)果的函數(shù)，這是我們常用來查看部分結(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’),

});

}