有人說我只會只會簡單的html 能不能做安卓（android）手機上的app呢？答案是可以的。什么是android呢，用過手機的估計都知道了。App就是手機上的應用軟件，一種移動客戶端軟件。掌握html，你就可以做一個HTML的網(wǎng)站了，這也不是APP啊。其實 我們利用html寫出手機屏幕大小的web頁面 讓后放入手機瀏覽器內執(zhí)行，就是一款web app了。在幾年前的工作中有做過手機App項目，pc前端和android和ios程序員配合完成整個項目的開發(fā)，這也讓我產(chǎn)生了學習android和ios程序開發(fā)的興趣。于是寫了第一個android程序first_app，分享給其他也想學習android移動開發(fā)的朋友或是好奇安卓app是怎么制作的朋友。Web app 也是app 的一種。可以把這個Html頁面打包成app。本質上都是web，都是利用html、css、js構建的網(wǎng)站，不同的是，webapp利用框架技術等讓你有了在使用App的感覺（比如頁面不跳轉刷新等）。這方面做的最好的是 HBuilder。使用它，你可以使用網(wǎng)頁（html+css+js）快速地創(chuàng)建APP應用程序。并在android手機中展示和使用。（當然如果網(wǎng)頁做得好的話，采用響應式布局，即可在手機上完美展示）。hbuilder優(yōu)點：速度快，所需要的環(huán)境少，加快了開發(fā)者速度，不會因為各種JDK，java，Android環(huán)境而無法打包生成apk或ipa頭疼，大大減少了開發(fā)繁瑣操作。

我們首先打開web開發(fā)工具hbuilder，新建一個項目如圖：

新建完成后， 在項目管理器會顯示新建的項目目錄，其中css，img，js和index.html這幾個文件可刪可改可替換。

unpackage文件夾是放置app圖標和啟動界面的圖片。

1和2是mui框架，需要的css和js文件，不懂可以不用動。

頁面入口默認是index.html，根據(jù)自己項目需要，更改APP的啟動頁面，3是manifest.json文件是移動App的配置文件，用于指定應用的顯示名稱、圖標、應用入口文件地址及需要使用的設備權限等信息，用戶可通過HBuilder的可視化界面視圖或者源碼視圖來配置移動App的信息，當然如果你要設置 APP 的啟動圖和圖標，你只需要在 manifest.json 里面進行設置即可，這就是為什么不要刪掉的原因！

下圖為index.html的內容，很簡單，在html的body中寫入內容。

云打包的好處就是我們不需要在本地搭建環(huán)境，直接提交上去，打包好會返回下載鏈接讓我下載安裝包，除了生產(chǎn) Android 安裝包之外，還可以生成 ios 的，我們這邊只測試生成 Android 的安裝包。

配置完成后，點擊頁面下方的圖標配置：配置APP在手機上的顯示圖標；默認是HBuilder的圖標：

點擊"打開下載目錄"，找到app所在目錄

提交之后會需要 2-5 分鐘的打包，然后生成一個 apk 安裝包，就可以在手機安裝使用你開發(fā)得 app 了，什么簽名這些全都不用搞。

打包成功后就可以將apk文件裝到到android手機上查看效果了。如圖：

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

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

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

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

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

你需要提前知道的事情

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

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

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

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

基本概念

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

1. 主線程

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

2. JavaScript 線程

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

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

React Native core architecture

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

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

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

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

create-react-native-app HelloNative

cd HelloNative

npm start

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

it may not use the latest version of react-native

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

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

React Native app

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

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

A closer look at the developer options

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

調試模塊

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

React Native Debugger in action

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

準備階段

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

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

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

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

· Importer 添加數(shù)據(jù)到Elasticsearch中

· Data Browser 以excel表格的形式查看Elasticsearch中的數(shù)據(jù)。

· Query Builder 組織管理關聯(lián)的Elasticsearch隊列。

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

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

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

Dataset of books

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

{

app: "good-books-ds",

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

type: "good-books-ds"

}

開啟 Reactive search之旅

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

為什么我們需要ReacttiveSearch呢？

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

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

開發(fā)搜索app

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

yarn add @appbaseio/reactivesearch-native

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

我們將使用這些在App.js中Adding ReactiveBase component React Native 中的Styling和網(wǎng)頁類似，我們這里采用的是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模塊去實現(xiàn)多區(qū)域的搜索功能，其核心如下所示

<DataSearch

componentId="searchbox"

dataField={[

'original_title',

'original_title.search',

'authors',

'authors.search',

]}

placeholder="Search for books"

autosuggest={false}

/>

DataSearch使用起來相當?shù)姆奖悖捎谄浔旧砭褪窃赿ataFied（s）的隊列中，因此這個模塊就可以輕松的幫助我們實現(xiàn)轉入到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相關結果的函數(shù)，這是我們常用來查看部分結果的方式。

如果你想讓你的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