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 即可运行项目，如图：
安装 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，即可看到如下界面：
随便输入一些文本，点击 Add 按钮，如果一切都没有问题的话可以看到「保存成功」的提示。
登录 LeanCloud 控制台，在数据管理界面可以看到我们新增的数据：
- 完整项目已提交至 GitHub
- 更多 ReactNative 相关问题，请参考 ReactNative 官方教程
- LeanCloud JavaScript SDK 文档