使用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 中,您可以使用 addEventListener 函数来监听事件,本文通过实例代码给大家介绍react中如何使用监听,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • React深入分析useEffect源码

    React深入分析useEffect源码

    useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
    2022-11-11
  • React基于RBAC的权限控制案例讲解

    React基于RBAC的权限控制案例讲解

    这篇文章主要介绍了React基于RBAC的权限控制,通过定义角色和权限、编写权限检查函数以及在路由、组件和选择控件中使用这些函数,可以灵活地控制应用中的访问权限,需要的朋友可以参考下
    2024-05-05
  • React Context与setState详解使用方法

    React Context与setState详解使用方法

    Context提供了一个无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。在一个典型的 React 应用中,数据是通过props属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的
    2022-11-11
  • React.Js添加与删除onScroll事件的方法详解

    React.Js添加与删除onScroll事件的方法详解

    这篇文章主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    解决React报错Property does not exist on 

    这篇文章主要为大家介绍了React报错Property does not exist on type 'JSX.IntrinsicElements'解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React事件绑定的方式详解

    React事件绑定的方式详解

    react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向,今天通过本文给大家介绍React事件绑定的方式,感兴趣的朋友
    2021-07-07
  • react路由v6版本NavLink的两个小坑及解决

    react路由v6版本NavLink的两个小坑及解决

    这篇文章主要介绍了react路由v6版本NavLink的两个小坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    这篇文章主要介绍了react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面,需要的朋友可以参考下
    2019-11-11
  • ReactNative Image组件使用详解

    ReactNative Image组件使用详解

    本篇文章主要介绍了ReactNative Image组件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论