Question

AsyncStorage我遇到了一些问题，我希望你可以帮助我。我必须写一些笔记并保存，以便当我再次打开应用程序时，它们将显示在ListView上。

以下是我使用的课程：

Notes.js：

    import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';


export default class Note extends Component {
    render() {
        return (
            <View key={this.props.keyval} style={styles.note}>
                <Text style={styles.noteText}>{this.props.val.date}</Text>
                <Text style={styles.noteText}>{this.props.val.note}</Text>

                <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
                    <Text style={styles.noteDeleteText}>Del</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


    const styles = StyleSheet.create({
    note: {
        position: 'relative',
        padding: 20,
        paddingRight: 100,
        borderBottomWidth:2,
        borderBottomColor: '#ededed'
    },
    noteText: {
        paddingLeft: 20,
        borderLeftWidth: 10,
        borderLeftColor: '#0000FF'
    },
    noteDelete: {
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2980b9',
        padding: 10,
        top: 10,
        bottom: 10,
        right: 10
    },
    noteDeleteText: {
        color: 'white'
    }
});

This is the component that I use every time when I want to create a note.

Main.js：

    import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TextInput,
    ScrollView,
    TouchableOpacity,
    AsyncStorage,
} from 'react-native';

import Note from './Note';

export default class Main extends Component {

    constructor(props){
        super(props);
        this.state = {
            noteArray: [],
            noteText: '',
        };
        this.getSavedNotes(this.state.noteArray);
    }
    render() {
        let notes = this.state.noteArray.map((val, key)=>{
            return <Note key={key} keyval={key} val={val}
                    deleteMethod={()=>this.deleteNote(key)}/>
        });
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>- NOTER -</Text>
                </View>
                <ScrollView style={styles.scrollContainer}>
                    {notes}
                </ScrollView>

                <View style={styles.footer}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='Write your note here'
                        onChangeText={(noteText)=> this.setState({noteText})}
                        value={this.state.noteText}
                        placeholderTextColor='white'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                </View>
                <TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
            </View>
        );
    }

    addNote(){
        if(this.state.noteText){
            var d = new Date();
            this.state.noteArray.push({
                'date':d.getFullYear()+
                "/"+(d.getMonth()+1) +
                "/"+ d.getDate(),
                'note': this.state.noteText
            });

            this.setState({ noteArray: this.state.noteArray });
            this.setState({noteText:''});
            AsyncStorage.setItem('arr', JSON.stringify(this.state.noteArray));
            alert(this.state.noteArray);
        }
    }

    deleteNote(key){
        this.state.noteArray.splice(key, 1);
        this.setState({noteArray: this.state.noteArray});
    }

    getSavedNotes = async (noteArray) =>{
      try{
        let data = await AsyncStorage.getItem('arr');
        if(JSON.parse(data))
        {
          this.state.noteArray = JSON.parse(data);v
        }
      }catch(error){
        alert(error);
      }
    }
}


    const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        backgroundColor: '#1A237E',
        alignItems: 'center',
        justifyContent:'center',
        borderBottomWidth: 10,
        borderBottomColor: '#ddd'
    },
    headerText: {
        color: 'white',
        fontSize: 18,
        padding: 26
    },
    scrollContainer: {
        flex: 1,
        marginBottom: 100
    },
    footer: {
        position: 'absolute',
        bottom: 0,
        backgroundColor: '#000000',
        left: 0,
        right: 70,
        zIndex: 10
    },
    textInput: {
        alignSelf: 'stretch',
        color: '#fff',
        padding: 20,
        backgroundColor: '#252525',
        borderTopWidth:2,
        borderTopColor: '#ededed'
    },
    addButton: {
        position: 'absolute',
        zIndex: 11,
        right: 0,
        bottom: 0,
        backgroundColor: '#1A237E',
        width: 70,
        height: 68,
        // borderRadius: 35,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 8
    },
    addButtonText: {
        color: '#fff',
        fontSize: 24
    }
});

这是我尝试保存笔记的地方。似乎保存了笔记，但是当我打开应用程序时它们不会显示。只有在我在文本框中粘贴一个字母后才会显示它们。

最后是App.js：

    import React, { Component } from 'react';
    import Main from './app/components/Main.js';


    export default class App extends Component {
      render() {
        return (
          <Main/>
        );
      }
    }

这里我只显示Main.js组件。

Answer 1

getSavedNotes = async (noteArray) =>{
      try{
        let data = await AsyncStorage.getItem('arr');
        data = JSON.parse(data);
        this.setState({noteArray:data}) //assuming data as array of notes
      }catch(error){
        alert(error);
      }
    }

应用程序打开时，反应原生显示保存的数据

1 个答案: