本节介绍创建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 deploy
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 deploy
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 deploy`,然后在App里双击`Reload(R,R)`.

--全文完--