ReactNative+Redux+LeanCloud开发IM（

简介

熟悉如何React Native + Redux 等全家桶技术来开发IM类App。

技术栈：

• React Native, React Navigation,
• Redux, Redux Saga, Redux Persist,
• Immutable
• reselect
• Fetch
• LeanCloud服务

创建 React Native项目

首先安装Node，NPM，React Native Cli等。

npm install -g react-native
react-native init OneIM

创建成功后，验证是否能正确运行（以andorid为例）

首先启动android模拟器，然后打包运行项目。

cd OneIM
react-native run-android

正确的话，脚本会自动构建出android测试包，安装到模拟器上，并运行显示欢迎页面。

注意，如果出现连接不上服务的错误, 在应用的设置菜单里输入正确的dev server和port信息。

项目目录结构

项目目录结构一个有两种：

1. 按代码类型划分
2. 按功能划分

个人推荐按功能划分目录结构，这样符合高内聚低耦合的设计思想。以后，随着项目的不断膨胀，
修改某一个功能时不用频繁的切换目录，而且，如果某个功能比较复杂，也可以在这个功能目录里按照类型划分子目录。

所以，最终项目的目录结构如下：

folder-structure.png feature-structure.png

配置LeanCloud服务

首先，创建LeanCloud帐号，获取APP ID及 APP KEY的信息。

然后，安装LeanCloud的SDK

npm install --save leancloud-storage leancloud-realtime

RN默认使用jest进行测试。编写测试代码，验证LeanCloud是否能够正确访问。

import AV from 'leancloud-storage';
import {AV_APP_ID as appId, AV_APP_KEY as appKey} from '../../app/constants';

describe('leancloud test suit',() => {
  it('save user test', async () => {
    AV.init({appId, appKey});
    let user = new AV.User();
    user.setUsername('user1');
    user.setPassword('testpass');
    const result = await user.signUp();
    console.log(result);
  })
});

测试代码通过，表示已经成功设置好LeanCloud服务。
可以设置环境变量DEBUG=leancloud*, 开启调试日志，SDK会把网络请求、错误消息等信息输出到 IDE 的日志窗口。

快速实现新用户注册及登录功能

React Navigation

页面导航或路由是一个应用的基本功能，RN本身提供了非常好用的导航组件react-navigation。
React Navigation提供三种方式的导航：

• TabNavigator, 提供页签效果导航
• StackNavigator， 导航栏效果导航
• DrawerNavigator，抽屉效果，左侧滑出

我们先用StackNavigator方式快速实现用户注册、登录及登录成功后跳转到主页的功能。

npm install --save react-navigation

配置好三个导航页面

const StackNav = StackNavigator({
  Login: {screen: Login},
  SignUp: {screen: SignUp},
  Home: {screen: ChatList}
});

导航跳转时只需要
this.props.navigation.navigate('SignUp')

创建三个页面

为了统一风格，组件页面文件命名采用首字母大写的驼峰方式，其它文件采用首字母小写的驼峰方式。

三个页面：

• Login - 登录页
• SignUp - 注册页
• ChatList - 会话列表主页

setup AV sdk:

import App from "./App";
import AV from 'leancloud-storage';
import {AV_APP_ID as appId, AV_APP_KEY as appKey} from './constants';


function setup() {
  //init leancloud sdk
  AV.initialize(appId,appKey);
  global.AV = AV;

  return App;
}
export default setup;

Login:

class Login extends Component {
  static navigationOptions = {
    title: 'Login',
  };

  constructor(props) {
    super(props);
    this.state = {
      userName: null,
      password: null,
      sending: false,
    };
  }

  _onLogin = () => {
    const {userName,password} = this.state;
    if (!userName || !password) {
      toastUtils.showShort('用户名或密码不能为空。');
      return;
    }
    const user = new global.AV.User();
    user.setUsername(userName);
    user.setPassword(password);
    this.setState({sending:true});
    user.logIn().then((result) => {
      toastUtils.showShort('登录成功。');
      this.props.navigation.navigate('Home');
      this.setState({sending:false});
    },(err) => {
      toastUtils.showShort(`登录失败,${err}`);
      this.setState({sending:false});
    });

  };

  _onSignUp = () => {
    this.props.navigation.navigate('SignUp');
  };

  render() {
    return (
      <View>
        <TextInput placeholder='输入用户名' onChangeText={(userName) => {
          this.setState({userName})
        }} value={this.state.userName}/>
        <TextInput secureTextEntry={true} placeholder='输入密码' onChangeText={(password) => {
          this.setState({password})
        }} value={this.state.password}/>
        <TouchableOpacity >
          <Button onPress={this._onLogin} title={`登录`} disabled={this.state.sending} />
        </TouchableOpacity>
        <TouchableOpacity onPress={this._onSignUp}>
          <Text >注册新账户</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

SignUp:

class SignUp extends Component {
  static navigationOptions = {
    title: 'SignUp',
  };

  constructor(props) {
    super(props)
    this.state = {
      userName: null,
      password: null,
    };
  }

  _onSignUp = () => {
    const {userName,password} = this.state;
    if (!userName || !password) {
      toastUtils.showShort('用户名或密码不能为空。');
      return;
    }
    const user = new global.AV.User();
    user.setUsername(userName);
    user.setPassword(password);
    user.signUp().then((result) => {
      toastUtils.showShort('注册成功。');
      this.props.navigation.navigate('Login');
    },(err) => {
      toastUtils.showShort(`注册失败。${err}`);
    })
  };

  render() {
    return (
      <View>
        <TextInput placeholder='输入用户名' onChangeText={(userName) => {
          this.setState({userName})
        }} value={this.state.userName}/>
        <TextInput secureTextEntry={true} placeholder='输入密码' onChangeText={(password) => {
          this.setState({password})
        }} value={this.state.password}/>
        <TouchableOpacity >
          <Button onPress={this._onSignUp} title={`注册`}/>
        </TouchableOpacity>
      </View>
    );
  }
}

ChatList:

const ChatList = () => (
  <View>
    <Text>Chat List page.</Text>
  </View>
);

打包运行项目

我只在android平台上测试过，ios直接参考官方文档。

cd android
gradlew assembleRelease

如何管理项目状态

从上面这个简单的例子可以看出，对于不复杂的功能可以直接在react中使用state方式，开发起来很快，也比较简单。
但对于稍大型项目，这种state维护在组件中的方式会让组件变得越来越难维护。

接下来，我们要迎来React最重要的伙伴Redux家族。通过Redux，我们可以以更加优雅的方式将应用的状态与显示组件彻底分离开来。

最后

代码已经上传到github，后面会不定期更新。