React-Native-跨平台app开发入门之三-App-Todolist

2018-01-20

ReactNative

> React-Native-跨平台app开发入门 介绍了如何使用 create-react-native-app 来新建 app 项目及使用 expo 来查看效果，本篇介绍创建一个简单的 TodoList app

# 效果

![](//cdn.supperxin.com/images/upload/2018/1/aa30c8ca-2aa8-44f2-8411-0cce89000da8.gif)

# 熟悉 react native 组件

一个简单的 TodoList 包含如下内容：

* TabNavigator ：用于在未完成列表和已完成列表切换显示
* TextInput ：用户增加任务列表
* FlatList ：用于显示任务列表
* Checkbox ：用于改变任务完成状态
* styles ：用于设置app样式
* flux ：app排版
* lift state up ： 将组件的状态升级

这些内容都可以在 [react native](https://facebook.github.io/react-native/docs/tutorial.html) 的网站查看。

# 创建项目

为了方便学习 React Native 的组件及查看效果，先基于 create-react-native-app 来新建 TodoList 项目：

    create-react-native-app todolist

然后将 App.js 替换为下面链接的内容：

    https://github.com/xiaoxin01/learn-react-native-todolist/blob/b472641c52b030d684d6eb324e04f28fbd2bcddb/App.js

然后可以通过 yarn start 来查看效果

# 数据存储

上面建立好的 app 的数据无法持久化保存，所以需要再引入数据存储方案。

如何选择 react native app 的数据库，可以参考下面链接：

* https://www.simform.com/react-native-database-selection-guide/

其中 realm 的 offline-fist 的概念及自动同步功能很适合新手入门学习使用，本文的数据存储方案也以此来进行。

# 转换项目

create-react-native-app 创建的项目只能在 expo 环境中执行，如果想要打包成 apk 或者引入第三方插件等功能，则需要将项目转换为 React Native app，转换的方法很简单，运行 yarn eject，然后根据提示操作即可。

关于eject可以参考：

    https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

# 引入 realm

运行如下命令，加载 realm：

```
yarn add realm --save
react-native link realm
```

新建 models.js：

```javascript
import Realm from 'realm';

class Todo extends Realm.Object {}
Todo.schema = {
    name: 'Todo',
    primaryKey: 'guid',
    properties: {
        isFinished: {type: 'bool', default: false},
        task: 'string',
        guid: 'string',
    },
};

class TodoList extends Realm.Object {}
TodoList.schema = {
    name: 'TodoList',
    properties: {
        name: 'string',
        items: {type: 'list', objectType: 'Todo'},
    },
};

export default new Realm({schema: [Todo, TodoList]});
```

realm要求所有的修改数据操作都要在transition中进行，对于 react native 来说，修改操作放在 write 方法中进行即可：

```javascript
realm.write(() => {
    realm.create('TodoList', todoList);
});
```

修改 App.js 参考：

    https://github.com/xiaoxin01/learn-react-native-todolist


# 参考：

* [Realm JavaScript](https://realm.io/docs/javascript/latest#introduction)
* [Realm数据库 从入门到“放弃”](https://www.jianshu.com/p/50e0efb66bdf)
* [ReactNative数据持久化方案](https://www.jianshu.com/p/0010aea78e10)

本文为博主原创，如需转载，请注明出处：http://www.supperxin.com

返回博客列表