# RNBcos

**Repository Path**: coderkent/rnbcos

## Basic Information

- **Project Name**: RNBcos
- **Description**: react native  bcos app
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-05-21
- **Last Updated**: 2023-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RNBcos: FISCO BCOS的React Native客户端 

#### 介绍
fisco bcos3.x react native 客户端 , 轻量级实现，简单演示。

* React Native可以跨端，无需引入新的语言(虽然js/ts本身也有很多版本和平台差异的坑), 是目前终端开发的重要方式(之一)。
主要参考文档: [官网](https://zh-hans.react.dev/),[React中文网](https://reactnative.cn/docs/intro-react)
以及ChatGPT.
[极客时间上的课程](https://time.geekbang.org/column/article/499434) 则主要看别人的经验和看法。

![演示图](./resources/demo123.jpg)

* 此项目的目的：在端侧完整跑通智能合约的ABI编解码、FISCO BCOS 3.x交易的编解码、ECDSA签名。
目前，在Nodejs，浏览器页面，ReactNative（安卓）上都能跑通端侧的编解码和签名全流程。


* 端侧编解码和签名后，通过代理向节点发送请求，代理服务采用[Python SDK](https://gitee.com/coderkent/python-sdk) + Flask实现。
参考[此项目](https://gitee.com/coderkent/bcos3_lite_js/)下的flaskserver目录。注意这个项目和python-sdk的相对位置。
主要原理是接受端侧发送的rpc命令字和sendtx/call的参数，以及经过编码的合约调用rawdata,转发给节点获取结果返回给端侧。
目前主要采用GET请求，未做安全鉴权等运营上必要的保护，仅供演示。 


* 开发时主要采用android模拟器，代理服务器在搭在本机，所以从模拟器去访问的服务器地址是10.0.2.2。未在IOS环境测试验证。

![概要网络结构](./resources/network.png)

#### 代码
* **App.tsx**: 主入口，直接用nav.js的导航框架代替

* **components目录**: 

一些可视化组件:

> **nav.js**: 总导航框架
> 
> **DemoHelloWorld**: HelloWorld合约的get/set , 演示交易编解码和走代理通信的整个过程
> 
> **DemoSimpleInfo**: 对应SimpleInfo合约 , 模拟简单的积分余额查询
> 
> **AccountBase.js**: 演示账户地址，可以修改账户名称
> 
> **BlockInfo.js**: 定期从链上获取区块高度
> 
> **ChainInfo.js**： 简单演示链配置
> 
> **IconScreen**: 在开发过程中找图标比较繁琐，干脆整理出一个演示页
> 
> **InputModel.js**: 一个用来输入文字的模态对话框
> 


* **utils目录**
> **bcosutils.js**: 本身是一个经过预打包的文件。采用browserify组件，从[utils/devutils](./utils/devutils)目录和npm库里打包生成浏览器可执行的js。
[devutils/utils_exports.js](./utils/devutils/utils_exports.js)是入口文件，可以打开该文件查看使用方法。
>
>之所以需要用browserify工具打包，主要是因为交易结构编解码的@tars/stream库里使用了Node.js内置的Buffer，这是React Native的虚拟机所不支持的，
> 采用browserify打包可自动转换成浏览器通用的buffer实现。

> **myglobal.js**: 一些全局数据，有的存到文件或本地存储，有的先写定供演示，以后再做配置化
> 
> **txhelper.js**: 用来帮助精简封装交易数据琐碎代码的方法，基于配置，做到一行调用即可生成交易rawdata。
> 
> 其他几个xxx_utils.js文件都很简单，顾名思义一看就懂


* TodoList
> 国密
> 
> Native混合编程
> 
> IOS版本
> 
> 稳定性可用性
> 
> 美化（目前丑）