====== React Native Demo 介绍 ======

React Native 可以让开发者使用 Javascript 和 React 开发原生 iOS 和 Android 应用，提高开发效率（Learn once, write anywhere）。

React Native Demo 已集成环信 Web IM SDK，并提供即时通讯基本功能，开发者可以直接将该 Demo 集成到您的应用中，立即获得即时通讯的能力。

GitHub 下载地址：https://github.com/easemob/webim-react-native

===== 版本支持 =====

React Native Demo 支持 iOS 9.0 以上版本，以及 Android 4.1 (API 16) 以上版本。

注：所有开发调试环境均基于Mac。

===== 功能 =====

React Native Demo 分为 iOS Demo 和 Android Demo 两部分，已完成的功能如下。

==== iOS ====

iOS Demo 已完成功能：

  * 登录
  * 注册
  * 好友
    * 列表及筛选
    * 好友信息展示
    * 黑名单
    * 删除好友
    * 好友通知
      * 添加好友通知展示
      * 接受好友请求
      * 拒绝好友请求
      * 添加好友
  * 群组
    * 群组列表
    * 群组成员列表
  * 聊天
    * 相机图片消息
    * 本地图片消息
    * emoji消息
    * 普通消息
  * 异常状态处理
    * 断线退出到登录页
    * 重复登录退出到登录页

==== Android ====

Android Demo 已完成功能：


  * 登录
  * 注册
  * 好友
    * 列表及筛选
    * 好友信息展示
    * 黑名单
    * 删除好友
    * 好友通知
      * 添加好友通知展示
      * 接受好友请求
      * 拒绝好友请求
      * 添加好友
  * 群组
    * 群组列表
    * 群组成员列表
  * 聊天
    * 相机图片消息
    * 本地图片消息
    * emoji消息
    * 普通消息
  * 异常状态处理
    * 断线退出到登录页
    * 重复登录退出到登录页
===== 目录结构 =====

App 的目录结构如下：

  * Containers: 容器 | 页面 | 路由
    * App.js 总入口
      * Redux/ 初始化
      * I18n/ 初始化
      * Config/index.js 系统初始配置
    * RootContainer.js 根容器
      * Navigation/NavigationRouter.js 初始化路由
      * /Config/ReduxPersist 持久化初始化
  * Components 常用组件
  * I18n 多语言支持
  * Images 图片资源
  * Lib WebIM初始化
  * Navigation: 路由相关
  * Redux: actions / reducers
  * Sdk: webim-easemobo SDK


===== Redux State =====


<code javascript>
{
    // ui相关
    ui: [
        // ui通用：比如loading
        common: {
            fetching:false
        },
        login: {
            username: '',
            password: '',
            isSigned: false,
        },
        register: { },
        contactInfo: { },
    ],
    im: [],
    // 数据实体
    entities: {
        roster: {
            byName: {
                {
                    jid, name, subscription, groups?
                }
            },
            names: ['lwz2'...],
            // 好友列表在此，因为好友列表来源于roster，息息相关
            friends: [],
        },
        // 订阅通知
        subscribe: {
            byFrom: {}
        },
        room: {},
        group: {
            byId: {},
            names: []
        },
        members: {
            byName: [],
            byGroupId: []
        }
        blacklist: {},
        message: {
            byId: {}
            chat: {
                [chatId]: [messageId1, messageId2]
            },
            groupChat: {
                [chatId]: {}
            },
        }
    }
}
</code>

----
<WRAP group>
<WRAP half column>
上一章节：[[im:400webimintegration:10webimintro|Web IM SDK集成]]
</WRAP>

<WRAP half column>
下一页：[[im:react-native:ios-app|iOS APP 集成]]
</WRAP>
</WRAP>