ReactNative 中使用 LeanCloud

最近移动应用开发领域,最令人振奋的就是 ReactNative 的发布了吧。ReactNative 有如下几个特点:

  • 使用 Web 开发中常用的技术,比如逻辑使用 JavaScript 来实现,界面描述使用一个 CSS 的子集,使用 flexlayout 进行布局。
  • 整个应用依然是 Native 的,JavaScript 只是跑在一个独立的线程中,利用 React 的 Virtual DOM 机制,将界面渲染成 Native 控件。
  • 可以使用 Chrome 开发者工具进行在线调试,甚至支持 LiveReload。
  • 未来会兼容多个平台(目前仅支持 iOS)。

ReactNative 遵循了 CommonJS 规范,实现了与 Node.js 相同的模块加载机制。因此很多 npm 的模块可以在 ReactNative 中运行,LeanCloud 的 JavaScript SDK 也可以在 ReactNative 中运行。

创建项目

首先我们需要 MacOSX 操作系统与 Node.js 运行环境,之后就可以使用 npm install -g react-native-cli 来安装 ReactNative 了。

安装成功之后,使用 react-native init LeanCloudRocks 来创建我们的项目。创建完成之后,可以在 LeanCloudRocks 文件夹下看到 LeanCloudRocks.xcodeproj 这个文件,双击即可使用 XCode 打开(或者使用 open LeanCloudRocks.xcodeproj 命令,效果相同)。之后按 COMMAND + R 即可运行项目,如图:

ReactNative-1

安装 LeanCloud SDK

在项目根目录下执行 npm install avoscloud-sdk --save 即可安装 LeanCloud SDK。然后使用您的编辑器打开 index.ios.js,在文件前部添加如下代码:

var AV = require('avoscloud-sdk').AV;
// 替换 App ID 和 App Key
AV.initialize('YOUR_APP_ID', 'YOUR_APP_KEY');

之后回到 iOS 模拟器,按 COMMAND + R 来重新加载应用,如果没有报错的话,说明 LeanCloud SDK 已经正确地加载进 ReactNative 环境,并且执行了。

功能实现

如果我们想要做一个简单的 TODO List 应用,使用者输入一条待办事项,点击提交,即可将数据上传到 LeanCloud 数据存储上。那我们需要创建一个 LeanCloud 的数据存储 Class 来保存这些信息,在初始化完 SDK 之后加入这行代码:

var Item = AV.Object.extend('Item');

界面方面,我们只需要一个输入框与一个提交按钮,我们需要修改 LeanCloudRocks 这个类成为如下形式:

var LeanCloudRocks = React.createClass({
  getInitialState: function() {
    return {
      content: '',
    };
  },
  render: function() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.input} onChange={this.onTextChange} value={this.state.content} placeholder='What to do now?'/>
        <TouchableHighlight style={styles.button} underlayColor='#99d9f4' onPress={this.onSubmitText}>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableHighlight>
      </View>
    );
  },
  onTextChange: function(event) {
    this.setState({content: event.nativeEvent.text});
  },
  onSubmitText: function(event) {
    var item = new Item();
    item.set('content', this.state.content);
    item.save().then(function() {
      AlertIOS.alert('保存成功');
    }).catch(function(e) {
      AlertIOS.alert('保存失败', e.message);
    });
  },
});

同时修改一下 style

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  input: {
    height: 50,
    padding: 4,
    margin: 10,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC',
  },
  button: {
    height: 50,
    margin: 10,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
});

在模拟器中按 COMMAND + R,即可看到如下界面:

ReactNative-2

随便输入一些文本,点击 Add 按钮,如果一切都没有问题的话可以看到「保存成功」的提示。

登录 LeanCloud 控制台,在数据管理界面可以看到我们新增的数据:

ReactNative-3

ReactNative 中使用 LeanCloud》上有6条评论

  1. Jerry

    2015-09-05 18:29:50.604 [error][tid:com.facebook.React.JavaScript] ‘Error: Invariant Violation: Application LeanCloudRocks has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.

    这是啥情况啊…

    回复
  2. Pingback引用通告: 基于 LeanCloud 云引擎的 Web 全栈方案:LeanEngine-Full-Stack | LeanCloud Blog

  3. Pingback引用通告: 基于 LeanCloud 云引擎的 Web 全栈方案:LeanEngine-Full-Stack | I LOVE UX

  4. tonyzeng

    似乎不能用啊,我用的是 react native 0.1.5, leancloud 是 npm 直接安装的
    会报错,can not resolve module xmlhttprequet 。。。。
    似乎是不能加载 leancloud 内部的依赖

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注