使用React Native创建以太坊钱包实现转账等功能

2024-10-22 07:35:43

之前想用React Native开发一版以太坊钱包app，但在生成账户那块遇见了问题，没有crypto等nodejs包，react native是运行在JavaScriptCore环境里面，是没有buffer, crypto 跟 stream这些库的，所以为了解决，就跟同事开发了基于golang的web3go，然后使用gomoble工具编译成ios需要的framework以及android需要的jar aar，完美解决问题

演示

dapp-demo-1.jpg

dapp-demo-2.jpg

安装web3go

git clone https://github.com/bcl-chain/web3.go.git

使用gomobile编译成framework，jar，aar

// generate frameworkgomobile bind -target=ios
./github.com/bcl-chain/web3
.go/mobile// generate arr jargomobile bind -target=android
 ./github.com/bcl-chain/web3.go/mobile

把生成的包link到原生app里面

link-web3go.jpg

andoir-getbalence.jpg

下载ETH本地测试工具ganache-cli

gan-cli.jpg

安装依赖

yarn
react-native run-android
react-native run-ios

getBalance代码分析

// IOS
RCT_EXPORT_METHOD(getBalance:
         (NSString*) address:
         (RCTPromiseResolveBlock)resolve
         rejecter:(RCTPromiseRejectBlock)reject){
 // ip地址
 Web3goEthereumClient* client = Web3goNewEthereumClient(nodeIP, nil);
 Web3goContext* ctx = Web3goNewContext();
 // 账户地址
 Web3goAddress* address1 = Web3goNewAddressFromHex(address, nil);
 @try {
  Web3goBigInt* a = [client getBalanceAt:ctx account:address1 number:-1 error:nil];
  NSString* ammount = [a getString:10];
  NSLog(@"%@", ammount);
  resolve(ammount);
 } @catch (NSError *exception) {
  NSLog(@"NSError: %@", exception);
  reject(@"NSError: %@", @"There were no events", exception);
 } @finally {
  NSLog(@"finally");
 }

}

// android
@ReactMethod
public void getBalance(String address, Promise promise) {
  try {
   web3go.EthereumClient client = Web3go.newEthereumClient(nodeIP);
   web3go.Context ctx = Web3go.newContext();
   web3go.Address address1 = Web3go.newAddressFromHex(address);
   web3go.BigInt a = client.getBalanceAt(ctx, address1, -1);
   String ammout = a.getString(10);
   promise.resolve(ammout);
  } catch (Exception e) {
   promise.reject(e.getMessage());
  }
}

// react-native
async getBalance() {
  try {
   var ammount = await NativeModules.Web3go.getBalance(this.state.defGaAddress);
   this.setState({
    gaAmmount: ammount
   })
  } catch (e) {
   console.error(e);
  }
}

如果有用，给个start

web3go

React-Native-Dapp

总结

以上所述是小编给大家介绍的使用React Native创建以太坊钱包实现转账等功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

react-native滑动吸顶效果的实现过程

前言最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来. 需求效果翻车过程第一种方案失败一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性
react native基于FlatList下拉刷新上拉加载实现代码示例

react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用官方介绍:https://reactnative.cn/docs/flatlist/ 下面是效果图: ios效果图 android效果图总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整.这样做的目的是:防止不满屏状态下的,onEndReac
react native 获取地理位置的方法示例

react native 官网介绍了这个 api Geolocation 但是这个api只能返回经纬度所以要把经纬度通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口在 react native 中,我们所用的是react native 自带的api定位功能,无需引入第三方js. react native 定位是通过Geolocation这个模块来实现的.想了解更多关于Geolocatio
使用React Native创建以太坊钱包实现转账等功能

之前想用React Native开发一版以太坊钱包app,但在生成账户那块遇见了问题,没有crypto等nodejs包,react native是运行在JavaScriptCore环境里面,是没有buffer, crypto 跟 stream这些库的,所以为了解决,就跟同事开发了基于golang的web3go,然后使用gomoble工具编译成ios需要的framework以及android需要的jar aar,完美解决问题演示 dapp-demo-1.jpg dapp-demo-2.jpg 安
PHP实现创建以太坊钱包转账等功能

1.Geth下载 (对以太坊了解不深的可以后面自己查找有关geth的资料,与此类似的客户端还有Ethereum.Parity .Mist),本文采用windows版(Windows系统:geth-windows-amd64-1.8.3) https://ethfans.org/wikis/Ethereum-Geth-Mirror 安装: windows版的直接傻瓜式安装到放软件的地方,然后打开安装根目录,这时可以看到有个geth.exe的可执行文件,先别急执行:先在该目录下创建一个piccgen
React Native 实现热更新并自动签名打包功能

项目背景:手动link的安卓App 1.下载 react-native-code-push npm install --save react-native-code-push 2.在android/settings.gradle文件下新增: include ':app', ':react-native-code-push' project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../no
使用Python的开发框架Brownie部署以太坊智能合约

介绍我希望可以在任何开发场景都尽量用Python.在区块链开发中,常用的是以太坊虚拟机智能合约语言Solidity,它具有许多不错的功能,并且仍然可以使用 Python 进行部署.刚开始使用Solidity时,我使用了Remix(https://remix.ethereum.org/),这是一个强大的Web IDE,可让您进行智能合约可视化.Remix很棒,我现在仍然使用它,但是在单个IDE之外可以实现很多其他功能.后来我开始学习Truffle(https://www.trufflesuite
React Native之prop-types进行属性确认详解

属性确认的作用使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老
React Native验证码倒计时工具类分享

本文实例为大家分享了React Native验证码倒计时工具类的具体代码,供大家参考,具体内容如下因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一直不走,这个工具类简单的解决程序退出后台,定时器不走的bug,那么,直接上代码咯~~ /** * Created by zhuang.haipeng on 2017.9.11 * * 广告倒计时,验证码倒计时工具类 * * 用法: //60 * 1000 为60秒 , 60 * 60 * 100 为60分钟 ... * let
React Native 搭建开发环境的方法步骤

本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y
React Native搭建iOS开发环境

一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&
React Native第三方平台分享的实例（Android，IOS双平台）

本文主要介绍了React Native第三方平台分享的实例(Android,IOS双平台),分享给大家,具体如下: 源码已开源到Github,地址请点击:react-native-share[一行代码,双平台分享] 目前支持分享的平台有[QQ][QQ空间][微信][朋友圈][微博][FaceBook] 欢迎大家star,fork..... [ Android平台配置 ] 1. app目录下创建 libs 文件夹,添加依赖文件[直接复制源码中 libs 目录即可] 2. app / src /
Android原生嵌入React Native详解

1.首先集成的项目目录我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

使用React Native创建以太坊钱包实现转账等功能

相关推荐

随机推荐