如何将 AsyncStorage 应用于 React Native 应用程序以在 TextInput 和 Picker 上存储数据

Posted 2023-05-07

【中文标题】如何将 AsyncStorage 应用于 React Native 应用程序以在 TextInput 和 Picker 上存储数据

【英文标题】：How to apply the AsyncStorage to React Native app for storing data on TextInput and Picker

【发布时间】：2022-01-18 08:32:32

【问题描述】：

我尝试学习使用AsyncStorage on React Native website。但我完全无法理解这个概念。我想通过单击保存数据的按钮（也称为“保存”按钮）将数据保存在 TextInput 和 Picker 上来为我的 React Native 应用程序使用 AsyncStorage。然后下次我打开应用程序时，保存的数据会出现在 TextInput 和 Picker 中。我怎样才能做到这一点？

下面是我使用 TextInput 和 Picker 的应用程序项目的代码：

import * as React from 'react';
import  useState, useEffect  from 'react';
import 
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity,
  TextInput,
  Picker,
  SafeAreaView,
  AsyncStorage,
 from 'react-native';
import Constants from 'expo-constants';

import  NavigationContainer  from '@react-navigation/native';
import  createNativeStackNavigator  from '@react-navigation/native-stack';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import  Card  from 'react-native-paper';


//Profile page
function Profile1() 
  return (
    <SafeAreaView>

      //TextInput 1
      <TextInput
        style=styles.input
        placeholder="Name"
        keyboardType="default"
      />
      
      //Picker 1
      <Picker style=styles.pickerS>
        <Picker.Item label="Select gender" value="select" />
        <Picker.Item label="Male" value="m" />
        <Picker.Item label="Female" value="f" />
      </Picker>

      //TextInput 2
      <TextInput
        style=styles.input
        placeholder="Biography"
        keyboardType="default"
      />

      //TextInput 3
      <TextInput
        style=styles.input
        placeholder="School name"
        keyboardType="default"
      />
 
      //Button, for saving the data after clicked
      <TouchableOpacity onPress=() => 'Button pressed'>
        <Text style=styles.button>Save</Text>
      </TouchableOpacity>

    </SafeAreaView>
  );


const Stack = createNativeStackNavigator();

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Profile" component=Profile1 />
      </Stack.Navigator>
    </NavigationContainer>
  );


const styles = StyleSheet.create(
  button: 
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: 'white',
    alignSelf: 'flex-start',
    marginHorizontal: 12,
    marginBottom: 6,
    minWidth: '48%',
    textAlign: 'center',
  ,
  input: 
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
  pickerS: 
    height: 45,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
);

export default App;

添加 AsyncStorage 代码后，如下所示：

import * as React from 'react';
import  useState, useEffect  from 'react';
import 
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity,
  TextInput,
  Picker,
  SafeAreaView,
  AsyncStorage,
 from 'react-native';
import Constants from 'expo-constants';
    
    import  NavigationContainer  from '@react-navigation/native';
    import  createNativeStackNavigator  from '@react-navigation/native-stack';
    
    // You can import from local files
    import AssetExample from './components/AssetExample';
    
    // or any pure javascript modules available in npm
    import  Card  from 'react-native-paper';
    
    storeData = async () => 
  try 
    await AsyncStorage.setItem(
      '@TextInputKey',
      'Your text input value'
    );
    await AsyncStorage.setItem(
      '@PickerKey',
      'Your picker input value'
    );
   catch (error) 
    // Error saving data
  
;

retrieveData = async () => 
  try 
    const textInputValue = await AsyncStorage.getItem('@TextInputKey');
 const pickerValue = await AsyncStorage.getItem('@PickerKey');
    if (textInputValue !== null) 
      console.log(textInputValue);
    
 if (pickerValue !== null) 
      console.log(pickerValue);
    
   catch (error) 
    // Error retrieving data
  
;

saveToAsync = async() => 
 try 
        await AsyncStorage.setItem(
          '@TextInputKey',
          this.state.textValue
        );
       catch (error) 
        // Error saving data
      


//Profile page
function Profile1() 
  return (
    <SafeAreaView>
      <TextInput
        style=styles.input
        placeholder="Name"
        keyboardType="default"
        onChangeText=(text)=> this.setState(textValue: text)
        onSubmit=() => this.saveToAsync()
      />

      <Picker style=styles.pickerS>
        <Picker.Item label="Select gender" value="select" />
        <Picker.Item label="Male" value="m" />
        <Picker.Item label="Female" value="f" />
      </Picker>

      <TextInput
        style=styles.input
        placeholder="Biography"
        keyboardType="default"
      />

      <TextInput
        style=styles.input
        placeholder="School name"
        keyboardType="default"
      />

      <TouchableOpacity onPress=() => 'Button pressed'>
        <Text style=styles.button>Save</Text>
      </TouchableOpacity>

    </SafeAreaView>
  );


const Stack = createNativeStackNavigator();

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Profile" component=Profile1 />
      </Stack.Navigator>
    </NavigationContainer>
  );


const styles = StyleSheet.create(
  button: 
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: 'white',
    alignSelf: 'flex-start',
    marginHorizontal: 12,
    marginBottom: 6,
    minWidth: '48%',
    textAlign: 'center',
  ,
  input: 
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
  pickerS: 
    height: 45,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
);

export default App;

【参考方案1】：

import * as React from "react";
import  useState, useEffect  from "react";
import 
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity,
  TextInput,
  Picker,
  SafeAreaView,
  AsyncStorage,
 from "react-native";
import Constants from "expo-constants";

import  NavigationContainer  from "@react-navigation/native";
import  createNativeStackNavigator  from "@react-navigation/native-stack";

// You can import from local files
import AssetExample from "./components/AssetExample";

// or any pure javascript modules available in npm
import  Card  from "react-native-paper";

//Profile page function Profile1() 
const [selectedValue, setSelectedValue] = useState("m");
const [inputValue, setInputValue] = useState("");
saveToAsync = async () => 
  try 
    await AsyncStorage.setItem("@TextInputKey", inputValue);
    await AsyncStorage.setItem("@PickerInputKey", selectedValue);
   catch (error) 
    // Error saving data
  
;
return (
  <SafeAreaView>
    <TextInput
      style=styles.input
      placeholder="Name"
      keyboardType="default"
      onChangeText=(text) => setInputValue(text)
    />

    <Picker
      style=styles.pickerS
      selectedValue=selectedValue
      onValueChange=(itemValue, itemIndex) => setSelectedValue(itemValue)
    >
      <Picker.Item label="Select gender" value="select" />
      <Picker.Item label="Male" value="m" />
      <Picker.Item label="Female" value="f" />
    </Picker>

    <TextInput
      style=styles.input
      placeholder="Biography"
      keyboardType="default"
    />

    <TextInput
      style=styles.input
      placeholder="School name"
      keyboardType="default"
    />

    <TouchableOpacity onPress=() => this.saveToAsync()>
      <Text style=styles.button>Save</Text>
    </TouchableOpacity>
  </SafeAreaView>
);

const Stack = createNativeStackNavigator();

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Profile" component=Profile1 />
      </Stack.Navigator>
    </NavigationContainer>
  );


const styles = StyleSheet.create(
  button: 
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: "white",
    alignSelf: "flex-start",
    marginHorizontal: 12,
    marginBottom: 6,
    minWidth: "48%",
    textAlign: "center",
  ,
  input: 
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
  pickerS: 
    height: 45,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  ,
);

export default App;

【讨论】：

好主意，但现在我有 3 个问题，即未定义“storeData”、“retrieveData”和“saveToAsync”。我应该如何解决它？另外，我忘了提到点击“保存”按钮时数据会保存。

更新你的代码，帮到你。

好的，我现在已经更新了代码。

@WetzelSchultz 我已经更新了代码..它将存储您的数据....检索使用您想要的任何地方的检索功能。