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(
                <View key={i} style={style.row}>
                    <Text
                        onPress={() => {
                            let todoList = this.state.todoList;
                            let task = todoList[i];
                            todoList.splice(i, 1);
                            this.saveHistory(task);
                            this.setState({
                                 todoList: todoList
                             });
                        }
                    }>☐  </Text>
                    <Text>{i + 1}  </Text>
                    <Text
                        onPress={() => {
                                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}</Text>
                    <TextInput autoFocus={item.showStatus}
                               style={{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();
                        }}
                    />
                    <View style={{flex:0.1,overflow:'hidden'}}>
                        <Button style={{width:20}}
                                onPress={() => {
                                this.deleteOne(i);
                            }}
                                title="x"
                                color="#841584"
                                accessibilityLabel="delete"
                        />
                    </View>
                </View>
            );
        }
        return (
            <View style={style.container}>
                <TextInput
                    style={style.edit}
                    underlineColorAndroid='transparent'
                    autoCapitalize="none"
                    value={this.state.text}
                    placeholder="输入待办事项，回车提交"
                    onSubmitEditing={
                        (e) => {
                            this.addOne(e);
                        }
                    }
                    onChangeText={(text) => {this.setState({text:text})}}
                    value={this.state.text}
                />
                {row}

                <View style={{height:15}}></View>
                <Button title="清空历史"
                        onPress={() => {
                            this.setState({
                                historyList:[]
                            });
                            storage.save({
                                key:'historyList',
                                data: JSON.stringify([])
                            });
                    }}/>
                <FlatList style={style.list}
                          extraData={this.state}
                          data={this.state.historyList}
                          renderItem={({item, index}) => <Text> {index+1} {item.text}</Text>}
                />
            </View>
        );
    }
}

/*{row}*/
/*onChangeText={(text) => {this.setState({text:text})}} 要加上这句才能实现text实时更新
 * */
/**/

const style = StyleSheet.create({
    row: {
        display: 'flex',
        flexDirection: 'row',
        width: window.width,
        height: 35,
        borderBottomWidth: 1,
        borderColor: '#ccc',
        justifyContent: 'center',
        alignItems: 'center'
    },
    edit: {
        backgroundColor: '#fff'
    },
    container: {
        margin: 30
    },
    list: {
        margin: 10
    },
    delete: {
        borderWidth: 1
    }
});