本节介绍创建ReactNative项目,并在ReactNative环境里调用bucky。

准备ReactNative开发环境。

参考教程:

  1. 非官方中文教程(翻译):https://reactnative.cn/docs/0.39/getting-started.html
  2. 官方教程:https://facebook.github.io/react-native/docs/getting-started.html
    • QuickStart 或
    • Build Projects With Native Code

例如参考链接1,选择Mac+Andoird环境,step by step搭建开发环境。

创建ReactNative示例。

在搭建好ReactNative开发环境后,可以开始使用bucky命令行创建示例项目并运行。

首先,选择从示例项目初始化解决方案,并选择ReactNative这个示例:

bucky init -i

其次,构建项目,并初始化konwledges:

bucky build
bucky k -reset

最后,进入src/client目录,使用react-native命令运行react-native示例项目。注意andoird手机要连接上电脑,推荐直接用真机开发。

cd src/client
react-native run-android

可以看下目录结构:

.
├── dist
│   ├── ...
├── knowledges.json
├── solution.json
├── src
│   ├── client
│   │   ├── App.js
│   │   ├── __tests__
│   │   ├── android
│   │   ├── app.json
│   │   ├── core
│   │   │   ├── bucky_meta.js
│   │   │   ├── rn_core.js
│   │   │   └── rn_ld_core.js
│   │   ├── index.js
│   │   ├── ios
│   │   └── package.json
│   └── server
│       └── calc
│           ├── calc.js
│           ├── config.json
│           └── onload.js
└── test
    └── calc
        └── test.js

项目结构:

  • src/server是bucky项目,下面的calc是个bucky XARPackage。
  • src/client是ReactNative项目,而src/client/core下放了bucky的ReactNative适配运行时。

在ReactNative的程序入口src/client/App.js里包含了初始化bucky并对calc:calc模块发起RPC调用 的示例代码。

新建ReactNative新项目。

bucky命令行工具支持在解决方案内创建一个新的ReactNative项目,步骤如下:

  1. 创建一个创建ReactNative项目
  2. 创建bucky项目,添加XARPackage
  3. 在ReactNative项目里调用bucky项目的XARPackage的接口。

创建ReactNative项目

首先,创建目录,并进入交互式初始化,选择新建解决方案:

mkdir rntest
cd rntest
bucky init -i

接着,添加新项目,输入项目目录: src/client/

然后是,选择项目类型为:

请选择项目类型:
────────────────────
1. bucky项目(后台)
2. HTML5(前端)
3. 微信小程序(前端)
4. ReactNative(前端)

选择序号4,创建ReactNative(前端)项目。此时,bucky会调用react-native init ${projectName}初始化 ReactNative项目,耐心等待中。

创建bucky项目

创建完毕后,提示$继续添加project? [y/n]:,输入y,继续创建一个bucky项目:

  • 输入项目路径为src/server
  • 选择bucky项目(后台)类型
  • 输入packagename为calc
  • 选择示例package,
  • 选择只允许后端
  • 一路输入n

在ReactNative项目里调用bucky项目的XARPackage的接口。

打开src/client/App.js 可以看到BuckyTest类,根据注释的提示,编写调用calc:calc模块的div2接口的代码。

构建,运行

最后,使用bucky工具构建,并在android上运行react native。注意andoird手机要连接上电脑,推荐直接用真机开发。

bucky build
bucky k -reset
cd src/client
npm install 
react-native run-android

常见问题

F: 出现错误:

Unable to load scripts from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.

A: 手机摇一摇,RN App上会出现菜单,选择Dev Setting,点击Debug server host&port for device,设置你的PC电脑上启动的RN服务的IP和端口,默认端口是8081,例如:192.168.100.1:8081,然后返回,并重新执行

react-native run-android

F: 出现错误:

load file failed, status=404 url=https://dev.buckycloud.com/services/repository/1001/loadfile?appid=...,resp={"resykt":9}

A: 执行bucky build,然后在App里双击Reload(R,R).

--全文完--

results matching ""

    No results matching ""