使用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创建以太坊钱包实现转账等功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • webpack构建react多页面应用详解

    webpack构建react多页面应用详解

    这篇文章主要介绍了webpack构建react多页面应用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • react动态路由的实现示例

    react动态路由的实现示例

    React中动态路由通过ReactRouter库实现,根据应用状态或用户交互动态显示或隐藏组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • 详解webpack2+React 实例demo

    详解webpack2+React 实例demo

    本篇文章主要介绍了详解webpack2+React 实例demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解react hooks组件间的传值方式(使用ts)

    详解react hooks组件间的传值方式(使用ts)

    本文主要介绍了react hooks组件间的传值方式(使用ts),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 一起来学习React元素的创建和渲染

    一起来学习React元素的创建和渲染

    这篇文章主要为大家详细介绍了React元素的创建和渲染,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 在react-antd中弹出层form内容传递给父组件的操作

    在react-antd中弹出层form内容传递给父组件的操作

    这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • React 实现表单组件的示例代码

    React 实现表单组件的示例代码

    本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下
    2024-07-07
  • 解决React报错Property value does not exist on type HTMLElement

    解决React报错Property value does not exist&n

    这篇文章主要为大家介绍了React报错Property value does not exist on type HTMLElement解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React中immutable的UI组件渲染性能详解

    React中immutable的UI组件渲染性能详解

    这篇文章主要为大家介绍了React中immutable的UI组件渲染性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React Agent 自定义实现代码

    React Agent 自定义实现代码

    在使用langchain的ReactAgent遇到问题后,作者尝试自定义ReactAgent实现,通过详细分析langchain中的agent功能和问题,结合React思想,作者设计了新的agent逻辑并在GitHub上分享了代码,新的ReactAgent通过改进prompt和工具调用逻辑,提升了任务执行的效果和稳定性
    2024-10-10

最新评论