React Native也能玩区块链了

简介:

区块链天生具有的不可更改性和去中心化特性,使得开发许多令人惊叹的使用案例成为可能,例如自治组织、销售、社交网络、保险公司以及成百上千人之间的游戏。

近日,根据 dApp 白皮书介绍,相对于后端代码运行在集中的服务器的 App 而言,dApp 的后台代码基本上运行在一个去中心化的点对点网络。

这里写图片描述
本文将阐述如何使用 React Native 来制作一个跨平台的移动 dApp,用于将你最爱的密码朋克(cryptopunks) 进行排名。
这里写图片描述

为什么是密码朋克? 密码朋克是一个了不起的项目,神一样的存在。如果想了解更多信息,可以查看下面的 reddit 中的博客。

这里写图片描述

技术点

在介绍实例之前,我们先来看一些基础的概念:

  • 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。

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 的Math.random()函数可能会被看作是一个加密学上来讲可预测的随机数生成器,但我现在并不担心这点,因为 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。

import Contract from 'truffle-contract';

import VotingArtifact from '../build/contracts/Voting.json';

import Web3 from 'web3';

function Star(candidate) {
    const Voting = Contract(VotingArtifact);

    var web3Provided;
    // Supports Metamask and Mist, and other wallets that provide 'web3'.
    if (typeof web3 !== 'undefined') {
        // Injected web3 detected.
        // Use the Mist/wallet provider.
        // eslint-disable-next-line
        web3Provided = new Web3(web3.currentProvider);
    } else {
        // No web3 instance injected, using Local web3.
        web3Provided = new Web3(AnySupportedProvidedWithHardcodedAccount);
    }
    Voting.setProvider(web3Provided.currentProvider);
    web3Provided.eth.getAccounts((error, result) => {
        Voting.deployed().then(contractInstance => {
            contractInstance.voteForCandidate(candidate, {
                // configure the priority of the vote
                gas: 140000,
                // ***
                // In a real dapp the coinbase should be provided by your wallet.
                // ***
                from: result[0],
            });
        });
    });
}

react-native-geth 项目实现了一个轻量的客户端 Ethereum 节点,因此我认为它有望成为可能产生的 React Native HD 钱包的一个关键依赖,通过这种 React Native HD 钱包,可以将 web3 注入到任何给定的 App 中,绝对雄心勃勃。

智能合约

我用 Solidity 语言创建了一个简单的投票合约,使用 truffle-contract 作为一种抽象接口,以便在移动 dApp 中使用它。

合约是不可更改的。一旦合约被创建并部署到区块链上,就不能改变、撤回或者修改。
Voting 有一个构造器,这个构造器用一个 cryptopunks 数组初始化,并且基于他们的主要附属特征给他们分配了一个识别符名称。
如果你对合约感到好奇,它就部署在 Ropsten Testnet 网络上,可以随时查看。

最后是示例代码:
https://expo.io/@agrcrobles/react-native-blockchain-poll
https://github.com/agrcrobles/react-native-blockchain-poll

如今尽管区块链带来了大量的使用案例,但是大公司通常没有在移动 App 上采用区块链。因为所有的 ICOs 都是基于 Web 的。

来自 cipherbrowser 和 status.im 的人们正在创作移动 dApp 浏览器,这是一件了不起的工作。我想他们已经完成了那一步。

我支持去中心化的跨平台移动 App 的想法。随着时间推移,React Native 越来越成熟和稳定,并且被大公司采用来开发真正伟大的移动 Apps(事实上,status.im 移动 App 就是基于 React Native)。并且我十分确信,不久就可以在 React Native 中使用区块链来构建真正的移动 dApp 了。

附:
原文链接:
https://hackernoon.com/bringing-the-blockchain-to-react-native-98b76e15d44d
密码朋克相关博客:
https://www.reddit.com/r/ethtrader/comments/7hdycd/if_you_think_cryptokitties_is_about_cats_youre/

目录
相关文章
|
6月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
103 2
|
6月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
245 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1901 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
135 1
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
113 2
|
6月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
5月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
79 0