react-native 入门demo:todolist

需安装:react-native-storage

App.js:

import React, { Component } from 'react';
import {
    Text,
    View,
    FlatList,
    StyleSheet,
    TextInput,
    Button,
    AsyncStorage
} from 'react-native';
import Storage from 'react-native-storage';

var storage = new Storage({
    // maximum capacity, default 1000
    size: 1000,
    storageBackend: AsyncStorage,
    // expire time, default 1 day(1000 * 3600 * 24 milliseconds).
    // can be null, which means never expire.
    defaultExpires: 1000 * 3600 * 24 * 365 * 100,
    // cache data in the memory. default is true.
    enableCache: true,
    // if data was not found in storage or expired,
    // the corresponding sync method will be invoked and return
    // the latest data.
    sync: {}
});

export default class DemoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            todoList: [],
            showStatus: false,
            historyList: []
        };
        storage.load({key: 'historyList'}).then(
            res => {
                let historyList = JSON.parse(res);
                this.setState({
                    historyList:historyList
                });
            }).catch(err => {
            storage.save({
                key:'historyList',
                data: JSON.stringify([])
            });
        });
        storage.load({key: 'todoList'}).then(
            res => {
                let todoList = JSON.parse(res);
                this.setState({
                    todoList:todoList
                });
            }).catch(err => {
            storage.save({
                key:'todoList',
                data: JSON.stringify([])
            });
        });
    }

    saveTodoList() {
        storage.save({
            key:'todoList',
            data: JSON.stringify(this.state.todoList)
        });
    }

    addOne(e) {
        if (e.nativeEvent.text) {
            var todoList = this.state.todoList;
            todoList.push({
                showStatus: false,
                text: e.nativeEvent.text
            });
            this.setState({
                text: '',
                todoList: todoList
            });
            this.saveTodoList();
        }
    }

    deleteOne(i) {
        console.log('ded', i);
        let todoList = this.state.todoList;
        todoList.splice(i, 1);
        this.setState({
            todoList: todoList
        });
        this.saveTodoList();
    }

    saveHistory(task){
        let historyList = [];
        storage.load({
            key: 'historyList',
            autoSync: true
        }).then(
            res => {
                console.log(res);
                historyList = JSON.parse(res)?JSON.parse(res):[];
                console.log('???==',res);
                historyList.push(task);
                storage.save({
                    key:'historyList',
                    data: JSON.stringify(historyList)
                });
                this.setState({
                    historyList: historyList
                });
            });
    }

    render() {
        var row = [];
        for (let i = 0; i < this.state.todoList.length; i++) {
            let item = this.state.todoList[i];
            row.push(
                
                    () => {
                            let todoList = this.state.todoList;
                            let task = todoList[i];
                            todoList.splice(i, 1);
                            this.saveHistory(task);
                            this.setState({
                                 todoList: todoList
                             });
                        }
                    }>☐  
                    {i + 1}  
                    () => {
                                let todoList = this.state.todoList;
                                todoList[i].showStatus = true;
                                this.setState({
                                    todoList: todoList
                                });
                                this.saveTodoList();
                            }}
                        style={{display:!item.showStatus?'flex':'none',flex:0.9}}>{item.text}
                    display:item.showStatus?'flex':'none',flex:0.9}}
                               defaultValue={item.text}
                               onSubmitEditing={(e) => {
                            let todoList = this.state.todoList;
                            todoList[i].text = e.nativeEvent.text;
                            todoList[i].showStatus = false;
                            this.setState({
                                todoList: todoList
                            });
                            this.saveTodoList();
                        }}
                    />
                    flex:0.1,overflow:'hidden'}}>
                        

你可能感兴趣的:(学习笔记)