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

Posted 2023-05-06

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

【英文标题】：How can I store the value of TextInput to local storage and get them when the app starts in react native?

【发布时间】：2021-12-12 09:37:11

【问题描述】：

我正在制作一个待办事项列表应用程序。我需要将输入值存储在本地或某处，以便即使在关闭一次后打开应用程序，我也可以在应用程序中显示它们。现在，当我关闭应用程序并重新启动所有以前的值时，它们都消失了。但是我想保留以前的数据，如果提供了新数据，如果我不手动删除它，这些数据也会被存储。我怎么解决这个问题？我正在使用世博会。 这是我的代码：

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;

【问题讨论】：

你可以使用这个包react-native-async-storage

【参考方案1】：

React Native 提供了一个名为 AsyncStorage 的本地存储选项。您可以使用 asyncstorage 将数据本地保存在设备上，并在启动时在 useEffect() 挂钩中获取该数据。

You can find more about AsyncStorage here.

虽然这已被弃用，但现在使用社区包“@react-native-async-storage/async-storage”。实现保持不变。

【讨论】：

非常感谢。它工作得很好。你能告诉我如何使用 asyncstorage 处理唯一 id 吗？