跑通示例源码

1 概览

本文介绍使用 react-native 框架，如何快速使用原生插件跑通示例源码，体验即时通讯服务。

2 准备环境

在运行示例源码前，请确保开发环境满足以下要求：

• React Native 0.60.0 或以上版本。
• iOS 11.0 或以上版本的 iOS 真机设备，暂不支持模拟器。
• Android 版本不低于 4.1 的 Android 设备、并开启“允许调试”选项，暂不支持模拟器。
• iOS/Android 设备已经连接到 Internet。
• 配置 VS Code 开发环境，可在应用商店中搜索 “React Native Tools” 扩展并下载。

3 前提条件

已在 ZEGO 控制台 创建项目，获取到了接入 ZIM SDK 服务所需的 AppID、AppSign。ZIM 服务权限不是默认开启的，使用前，请先在 ZEGO 控制台 自助开通 ZIM 服务（详情请参考 项目管理 - 即时通讯），若无法开通 ZIM 服务，请联系 ZEGO 技术支持开通。

4 示例源码目录结构

下列结构为 IM 源码文件的子目录结构，下文所涉及的文件路径均为相对于此目录的路径。

react-native
├── App.js
├── Gemfile
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── main.js
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
├── src
│   ├── assets
│   │   └── js
│   │       ├── config.js
│   ├── components
│   ├── hooks
│   │   └── zim.js
│   └── pages
│       ├── action
│       ├── chat
│       ├── group
│       ├── home
│       └── login
├───────

5 运行示例源码

1. 打开 VScode，选择 “文件 > 导入 > 从本地目录导入”，导入示例源码文件。

2. 打开 “src/assets/js” 文件夹下的 “config.js” 文件，并使用本文 3 前提条件 已获取的 AppID 和 AppSign 正确填写，并保存。

   export const appConfig = {
       appID: , // 填写申请的 AppID
       appSign: , // 填写申请的 AppSign
   }; 

   若您的项目已切换为 “Token 鉴权”，请在 ZEGO 控制台 上，申请临时 Token 用于调试。

3. 进入项目根目录，并执行 yarn install 安装依赖。

4. 如果是在 iOS 设备上运行程序，请在项目根目录，执行 cd ios && pod install 命令安装依赖。

5. 在项目根目录，执行 yarn ios / yarn android 启动项目。