Skip to content

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

Jump to bottom
Jinxin Chen edited this page Dec 11, 2019 · 1 revision

React-Native-跨平台app开发入门 介绍了如何使用 create-react-native-app 来新建 app 项目及使用 expo 来查看效果，本篇介绍创建一个简单的 TodoList app

效果

熟悉 react native 组件

一个简单的 TodoList 包含如下内容：

  • TabNavigator ：用于在未完成列表和已完成列表切换显示
  • TextInput ：用户增加任务列表
  • FlatList ：用于显示任务列表
  • Checkbox ：用于改变任务完成状态
  • styles ：用于设置app样式
  • flux ：app排版
  • lift state up ： 将组件的状态升级

这些内容都可以在 react native 的网站查看。

创建项目

为了方便学习 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 的数据库，可以参考下面链接：

其中 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：

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 方法中进行即可：

realm.write(() => {
    realm.create('TodoList', todoList);
});

修改 App.js 参考：

https://github.com/xiaoxin01/learn-react-native-todolist

参考：

Clone this wiki locally