0.57.x 的 RN demo 将不在维护，新的 demo 工程参见 NIM_ReactNative_Demo_0.61.5
0.57.x RN demo will not be maintained. About the new demo project, see NIM_ReactNative_Demo_0.61.5
云信 WebSDK ReactNative Demo 导读
初始化
- 本demo建议使用react-native >=0.51 的版本
项目初始化及调试
- 配置iOS/Android相关运行环境，可以参考：ReactNative搭建开发环境
- 下载demo工程至本地
- 通过
yarn或npm安装js包依赖，即工程目录下，命令行执行：yarn或npm install - Demo工程已对依赖做过了相应的配置，无需再执行 react-native link 命令，否则会报重复依赖的错误！！！
- 打开模拟器或者连接真机调试：
- iOS环境：
- iOS需要实现保证已安装XCode
- 控制台执行
react-native run-ios
- 安卓环境：
- 打开android-studio => 打开已有工程 => 选择
<工程文件夹>/android目录 - 点击android-studio右上方 同步(sync)按钮
- (首次运行需要)根据提示，需要额外安装sdk-24, sdk-25, sdk-26的版本库(如果之前没有装过)
- 打开安卓模拟器(android-studio右上角绿色三角形符号)
- 控制台执行
react-native run-android
- 打开android-studio => 打开已有工程 => 选择
- 控制台日志输出：
- iOS环境：
react-native log-ios - 安卓环境：
react-native log-android
- 更多调试方法参看：调试RN
iOS工程初始化的一些问题
Print: Entry, ":CFBundleIdentifier", Does Not Exist
一般通过react-native run-ios，会去下载boost、double-conversion、folly、glog等4个包，由于国内镜像源资源有所损坏，所以可能编译报错，开发者可以替换node_modules/react-native/third-party中的报内容。
相应的包，demo工程已经放到nim目录下供开发者参考
线上Release包发布
线上发布环境，云信sdk初始化配置debug选项务必设置为false，否则console.error可能会导致应用崩溃
iOS发布
1.双击 <工程目录>/ios 目录下的 NIM_ReactNative_Demo.xcodeproj 工程
2.选择 build device -> Generic iOS Device, 然后 clean 一下工程，选择 Product -> Archive
3.等待一段时间，出现如下界面
android发布
- 打开控制台，进入app/android文件夹
- 执行命令：
./gradlew assembleRelease - 安卓签名请参考打包APK
Demo工程项目
项目结构
- 项目入口：
- index.js
- 全局使用 global.IOS / global.__ANDROID 判断是哪个平台
- App.js
- 被index.js挂载，用于初始化页面状态管理器mobx
- android 安卓编译及运行工程
- ios iOS编译及运行工程
- src - 项目代码编写的地方
- index.js
- 页面入口，用于路由管理
- components/navBottom.js
- 导航栏组件，在功能页中引入
- page
- 页面编写，所有需要被使用的页面 均需被注册在 src/pages/index.js 中，方便 src/index.js及src/tabNavigator.js所引用
- 引入方式如 import Pages from './pages' => Pages.Login Pages.Session ...
- components
- UI组件
- store
- mobx 状态中心管理地址
- actions
- mobx全局提交事件，其中
link.js为云信sdk全局连接状态管理
- mobx全局提交事件，其中
- stores
- 云信sdk的连接、收发消息、存储管理等一切事件所存储的数据
- themes
- css 样式文件，所有需要被使用的样式 均需被注册在 src/themes/index.js，方便页面及组件所引用
- 引入方式如 import { globalStyle } from '../themes'
- res
- 图片等资源文件
- configs
- 配置信息
- common
- 设备信息等公共信息
- util
- 一些功能方法，诸如贴图表情、md5、数组操作、时间处理等等
- index.js
- index.js
RN TextInput输入中文Bug解决
- React-Native 升级到0.55.4以后，TextInput不支持输入中文，需要额外对ios做特殊处理，具体参考源码 src/component/chatBox.js
云信SDK的使用
简述
- 云信WebSDK-ReactNative(以下简称RN-SDK)的大部分API使用方法与SDK在Web浏览器环境使用相同，以减少开发者使用SDK所带来的障碍。
- 开发文档参见：
- 相比于Web浏览器环境及微信小程序环境，React-Native版本的SDK在以下应用场景上会略有不同。
本地数据库
RN-SDK同时支持含数据库和不含数据库的使用方式，根据开发者的业务场景，可自行处理。
- 不使用数据库，即在sdk初始化时对
db设为false即可，如：
const nim = NIM.getInstance({
// debug: true,
appKey: 'appKey',
account: 'account',
token: 'token',
db: false,
onconnect: onConnect,
onwillreconnect: onWillReconnect,
ondisconnect: onDisconnect,
onerror: onError
});- 使用数据库，需要开发者安装使用
realm，realm，RN-SDK目前不支持但不限制使用sqlite3作为本地数据库，开发者可以根据自己的需要，额外做存储处理。 - RN-SDK可以通过
usePlugin方法将数据库挂在到sdk实例上，用法如下：
const SDK = require('NIM_Web_SDK_v5.*.js');
const Realm = require('realm');
// 此处将外置的realm数据库挂载到sdk上，供sdk使用
SDK.usePlugin({
db: Realm,
});
const nim = SDK.NIM.getInstance({
// debug: true,
appKey: 'appKey',
account: 'account',
token: 'token',
db: true,
onconnect: onConnect,
onwillreconnect: onWillReconnect,
ondisconnect: onDisconnect,
onerror: onError
});消息推送
- iOS推送
- 安卓推送
- 参考demo的安卓推送(java)文件目录在 ./android/nimpush，
- 参考demo的安卓推送(js)文件目录在 ./nim/NIM_Android_Push.js
- 配置参见安卓推送配置
// iOS/安卓端外推送代码
const iosPushConfig = {
tokenName: 'push_online',
};
const androidPushConfig = {
xmAppId: '2882303761517806219',
xmAppKey: '5971780672219',
xmCertificateName: 'RN_MI_PUSH',
hwCertificateName: 'RN_HW_PUSH',
mzAppId: '113798',
mzAppKey: 'b74148973e6040c6abbda2af4c2f6779',
mzCertificateName: 'RN_MZ_PUSH',
fcmCertificateName: 'RN_FCM_PUSH',
};
var nim = SDK.NIM.getInstance({
// ...
iosPushConfig,
androidPushConfig,
// ...
})
// 安卓端内推送示例代码
import { showNotification } from '../nim/NIM_Android_Push';
showNotification({
icon: '', title: msg.from, content: showText, time: `${msg.time}`,
});发送文件/图片等
由于RN-SDK发送文件消息需要额外获取文件消息的属性一起发送，所以不建议直接使用sendFile接口发送文件，而是先通过previewFile获取文件的句柄，通过其他api方法将文件属性添加回文件对象，最后再使用sendFile接口发送文件。以下为发送图片文件的示例：
nim.previewFile({
type: 'image',
filePath: options.filePath,
uploadprogress(obj) {
// ...
},
done: (error, file) => {
// 通过其他API接口获取到长、宽、大小等图片属性
file.w = options.width;
file.h = options.height;
file.md5 = options.md5;
file.size = options.size;
const { scene, to } = options;
if (!error) {
constObj.nim.sendFile({
type: 'image',
scene,
to,
file,
done: (err, msg) => {
if (err) {
return;
}
this.appendMsg(msg);
},
});
}
},
});
- 消息需要额外附加属性列表：
- 图片对象
- size: 大小, 单位byte
- md5: md5
- w: 宽, 单位px
- h: 高, 单位px
- 音频对象
- size: 大小, 单位byte
- md5: md5
- dur: 长度, 单位ms
- 视频对象
- size: 大小, 单位byte
- md5: md5
- w: 宽, 单位px
- h: 高, 单位px
- dur: 长度, 单位ms
- 文件对象
- size: 大小, 单位byte
- md5: md5
- 图片对象
参见消息对象
全局属性注入
由于浏览器环境的全局变量为window，而react-native的全局变量为global，其属性不尽相同，为了做到兼容及适配，RN-SDK会mock一些属性，诸如global.navigator, global.location, global.io等，一般不影响用户正常使用
常用配置
应用图标更改
-
iOS更改目录 <项目路径>/ios/NIM_ReactNative_Demo/Images.xcassets/AppIcon.appiconset
-
Android更改目录 <项目路径>/android/app/src/main/res
应用显示名称更改
-
iOS更改地址 更改图中 Display Name
或者修改 info.plist 配置
- Android更改地址 <项目路径>/android/app/src/main/res/values/strings.xml
<resources>
<string name="app_name">{所需更改的APP名}</string>
</resources>NPM镜像库配置（国内淘宝镜像）
- npm config set registry https://registry.npm.taobao.org --global
- npm config set disturl https://npm.taobao.org/dist --global
- npm install -g yarn react-native-cli
- yarn config set registry https://registry.npm.taobao.org --global
- yarn config set disturl https://npm.taobao.org/dist --global
第三方依赖
mobxReact状态管理react-navigationReactNative路由管理react-native-elementsUI组件及图标react-native-easy-toastUI组件,提示框react-native-image-picker图片选择及摄像头拍照react-native-audio语音录制react-native-sound语音播放react-native-fs获取本地文件信息react-native-video视频播放器,demo未实现realm本地数据库,用于云信SDK存储本地数据及消息
其他参考阅读
- react 教程
- react-native 中文教程：
- 样式flex布局：
- 错误解决
Demo展示
推荐客户得京东卡，首次推荐成单得3000元京东卡，连续推荐4500元/单，上不封顶。点击参与https://yunxin.163.com/promotion/recommend
