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

 更新时间:2019年07月26日 16:39:16   作者:EAST东_059c  
这篇文章主要介绍了使用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

安装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手写一个手风琴组件示例

    React手写一个手风琴组件示例

    这篇文章主要为大家介绍了React手写一个手风琴组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 浅谈React高阶组件

    浅谈React高阶组件

    这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解React如何优雅地根据prop更新state值

    详解React如何优雅地根据prop更新state值

    这篇文章主要为大家详细介绍了React如何优雅地实现根据prop更新state值,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
    2023-11-11
  • React 小技巧教你如何摆脱hooks依赖烦恼

    React 小技巧教你如何摆脱hooks依赖烦恼

    Hooks 是一种函数,该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React,本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼,感兴趣的朋友一起看看吧
    2021-05-05
  • 在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

    在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

    这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,这里的登录功能其实就是一个表单提交,实现起来也很简单,具体实例代码跟随小编一起看看吧
    2021-05-05
  • 深入理解react-router@4.0 使用和源码解析

    深入理解react-router@4.0 使用和源码解析

    这篇文章主要介绍了深入理解react-router@4.0 使用和源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • React Redux应用示例详解

    React Redux应用示例详解

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • React+Mobx基本使用、模块化操作

    React+Mobx基本使用、模块化操作

    React 和 MobX 是一对强力组合,React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染,而MobX提供机制来存储和更新应用状态供 React 使用,这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下
    2022-09-09
  • React手稿之 React-Saga的详解

    React手稿之 React-Saga的详解

    这篇文章主要介绍了React手稿之 React-Saga的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • react context优化四重奏教程示例

    react context优化四重奏教程示例

    这篇文章主要为大家介绍了react context优化四重奏教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论