原來，React Native也能搭上區塊鏈！

作者｜locropulenton

譯者｜張健欣

儘管還不存在針對 React Native 的 Ethereum Wallet 或 Browser 項目來配合跨平台的去中心化移動 Apps，但在 React Native 中引入區塊鏈是可能的。

根據 dApp 白皮書，相對於後端代碼運行在集中的伺服器的 App 而言，dApp 的後台代碼基本上運行在一個去中心化的點對點網路。

區塊鏈天然且透明的不可更改性和去中心化，使得開發許多令人驚嘆的使用案例成為可能，例如自治組織、銷售、社交網路、保險公司以及成百上千人之間的遊戲。

這是一個區塊鏈應用的存在性證明的一個例子

在本文中，我將闡述如何使用 React Native 來製作一個跨平台的移動 dApp，用於將你最愛的密碼朋克（cryptopunks） 進行排名。

我對這個問題困擾不已。

為什麼是密碼朋克？密碼朋克是一個了不起的項目，神一樣的存在。如果想了解更多信息，可以查看下面的 reddit 中的博客（鏈接在文末）。

圖片來源：https://blockgeeks.com/

技術棧

在我們了解代碼之前，理解如何將它分解是非常重要的。

React Native 是一個由 Facebook 開發的框架，允許你使用 JavaScript 和 React 構建跨平台的移動原生 App。

Expo 是一個工具集，由於它包括了一系列開箱即用的原生 API，例如照像機等，因此使得上手構建 React Native 項目變得非常簡單。

Web3 是兼容 Ethereum 的 JavaScript API，實現了用於 node.js 和瀏覽器的 通用 JSON RPC規範。

Truffle 是一個 Ethereum 開發環境，提供了 ganache-core 等非常適合上手 React Native 開發的一系列工具。ganache-core 在本地模擬了一個 Ethereum 網路。

其它值得一提的比較酷的庫有 react-navigation、victory-native 和 react-antive-star-rating。

React Native上的Ethereum區塊鏈

在 React Native App 上運行 web3.js JavaScript API 有許多 公開的問題，而且目前看起來還沒有 切實的解決方案。

這是因為 React Native 使用 JavaScriptCore 執行環境，並且依賴於針對 React Native App 的 Node 標準庫 API（例如 buffer、crypto 或者 stream）是如何模擬或者實現的，這可能需要 鏈接到一些原生的依賴；因此，你也許需要使用 expo App，因為它有非常詳細的樣例項目，例如 react-nativify，在 React Native 環境引入了 Node API。

因此，當我尋找可選方案並且發現了 expo 上的功能請求 之後，作為一種解決方案，我構建了一個針對 React Native 的 babel preset，幕後使用了 crypto-browserify 和一個非常小的 randombytes（隨機位元組）的純 JavaScript 實現。

但是要注意，JavaScript 的函數可能會被看作是一個加密學上來講可預測的隨機數生成器，但我現在並不擔心這點，因為 ethereumjs-tx 不需要用它來為交易簽名。

因此，投票交易不是免費的嗎？

簡單來說，是的，投票交易不是免費的。

在主網（主要的 Ethereum 網路）上，所有的交易都是以實際的 ether 或 gas（譯註：以太坊的兩種計價單位）來估價的，但是我的實驗性 App 部署在 Testnet Ropsten 上。這是一個用於開發的實際區塊鏈場景，每秒每筆交易只允許 5 次投票。感謝 faucet 免費提供了用於測試的 ether。

在這個簡單的實現中，每個 Vote/Star 差不多值 0.0012 Ethers（即當天的 1.31 美元）。那一點也不便宜，但是如果每次投票消耗的 gas 減少，費用可能會被提高。

在那種情況下的風險是，礦工可能花費數小時或數天來處理那麼低額的交易。

關於如何通過在區塊鏈中使用 soft forks（軟分支）、LN、side chains（副鏈）或者 micro transactions（微交易）來優化這個問題，有許多持續的討論。

Web3 供應商困境

交易是一個用於修改區塊鏈狀態的指令集。為了對 Ethereum 交易進行簽名並且消費 gas 和實際的 ethers，需要一個公開的地址和一個私鑰，或者一個至少配置有一個沒有鎖定的幣庫賬號的 HD 錢包來為投票交易進行支付。

有許多不同的配置 web3 供應商的方法來訪問 Web 上的 dApps：通過 MetaMask Chrome Extension 注入了一個 ethereum 特製瀏覽器，例如 Mist；或者是通過創建一個本地實例，然後用代碼給賬號充值。

問題是，沒有這樣針對 React Native 的瀏覽器，並且 web3 不能注入在 App 中，因此，在這次試驗中，我最終用 truffle-hdwallet-provider 配置了一個幣庫。

另一個有效選擇是使用 MetaMask 的 web3-provider-engine，它允許你通過一個使用一個 純 JavaScript 的子供應商來為交易簽名，但是情況實際上相同，因為 truffle-hdwallet-provider 幕後使用了一種相似的機制。

在上述兩種意見中，賬戶都是編碼在移動 App 中的，這在實際的生產環境可能是不安全的，而且缺乏靈活性。

詢問用戶的公玥和私鑰來為交易簽名和為投票進行支付可能是一種簡單的替代方案，但是這種方案因為超級不安全而被廢棄了。

或者使用 uport 來註冊投票者的識別碼，但是我還 不確定是否支持 React Native。

react-native-geth 項目實現了一個輕量的客戶端 Ethereum 節點，因此我認為它有望成為可能產生的 React Native HD 錢包的一個關鍵依賴，通過這種 React Native HD 錢包，可以將 web3 注入到任何給定的 App 中，絕對雄心勃勃。

智能合約

我用 Solidity 語言創建了一個簡單的投票合約，使用 truffle-contract 作為一種抽象介面，以便在移動 dApp 中使用它。

合約是不可更改的。一旦合約被創建並部署到區塊鏈上，就不能改變、撤回或者修改。

Voting 有一個構造器，這個構造器用一個 cryptopunks 數組初始化，並且基於他們的主要附屬特徵給他們分配了一個識別符名稱。

如果你對合約感到好奇，它就部署在 Ropsten Testnet 網路上，可以隨時查看。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！