如何将 TextInput 的值存储到本地存储并在应用程序以本机反应启动时获取它们？

Question

I'm making a to-do list app. I need to store the input value locally or somewhere so that I can show them in the app even if the app is opened after closing once. Now when I'm closing the app and restarting all the previous values is being vanished. But I want to keep the previous data and If new data is given that will also be stored if I don't delete that manually. How can I solve this problem? I'm using expo. Here is my code:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, FlatList, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'
import Line from './Line';

function App() {

  //storing data in array
  const [initialElements, changeEl] = useState([

  ]);

  const [value, setValue] = useState('')
  const [idx, incr] = useState(1);
  const [exampleState, setExampleState] = useState(initialElements);

  //add button
  const addElement = () => {
    if (value != '') {
      var newArray = [...initialElements, { id: idx, title: value }];
      incr(idx + 1);
      setExampleState(newArray);
      changeEl(newArray);

    }

  }

  //delete button
  const delElement = (id) => {

    let newArray = initialElements.filter(function (item) {
      return item.id !== id
    })
    setExampleState(newArray);
    changeEl(newArray);
  }


  //showing item
  const Item = ({ title, id }) => (
    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
      <View style={{ borderWidth: 2, margin: 5, flex: 1, padding: 10, borderRadius: 10 }}>
        <TouchableOpacity onPress={() => { alert(title) }}>
          <Text >{title}</Text>
        </TouchableOpacity>
      </View>
      <TouchableOpacity onPress={() => delElement(id)}>
        <MaterialIcons name='delete' size={24} />
      </TouchableOpacity>
    </View>
  );

  //calling item for render
  const renderItem = ({ item }) => {
   
<Item title={item.title} id={item.id} />

  }
    


  return (    

    <View style={styles.container}>

      <View style={{ alignItems: 'center', marginBottom: 10 }}>
        <Text style={{ fontSize: 20, fontWeight: '500' }}>  To <Text style={{ color: 'skyblue', fontWeight: '900' }}>Do</Text> List</Text>
        <Line />
      </View>

      <View>
        <TextInput onChangeText={text => setValue(text)} placeholder="Enter to Todo" style={{ borderWidth: 2, borderRadius: 10, backgroundColor: 'skyblue', height: 40, paddingLeft: 10, borderColor: 'black' }}></TextInput>
      </View>


      <View style={{ alignItems: 'center' }}>
        <TouchableOpacity onPress={() => addElement()} style={{ marginTop: 10 }}>
          <View style={{ backgroundColor: 'black', width: 70, height: 40, justifyContent: 'center', borderRadius: 10 }}>
            <Text style={{ color: 'white', textAlign: 'center' }}>Add</Text>
          </View>
        </TouchableOpacity>
      </View>

      <FlatList
        style={{ borderWidth: 2, padding: 10, flex: 1, backgroundColor: '#EEDDD0', marginTop: 10 }}
        data={exampleState}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()
        }

      />
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    margin: 5,
  }
})

export default App;

Answer 1

React Native provides a local storage option called AsyncStorage. You might use asyncstorage to save the data locally on the device and get that data inside useEffect() hook on startup.

You can find more about AsyncStorage here.

Although this is deprecated and now community package " @react-native-async-storage/async-storage " is used. The implementation remains the same.