如何在本机反应中永久存储文本字段？答案

【问题标题】：How can I store a text field permanently in react native?如何在本机反应中永久存储文本字段？
【发布时间】：2021-05-11 22:36:09
【问题描述】：

很抱歉，如果这是一个相当基本的问题，我是新手，通常对原生和移动开发做出反应。

我最近开始使用 expo 和 react native 构建一个移动应用程序，但是我在这样做时遇到了问题。我想要完成的是构建一个页面，用户可以在其中编辑不需要存储在后端的配置文件详细信息。我需要将这些文本字段永久保存，直到用户以后可能对其进行编辑。

最初，似乎使用 AsyncStorage 是解决此问题的方法，但是，我发现在关闭 expo 服务器并重新启动它时，文本被删除并替换为占位符。这是否意味着我不正确地设置了 AsyncStorage，或者这仅仅是 expo 的性质？如果实际导出和部署了相关应用程序，这些数据会永久保存吗？我考虑使用类似领域的东西，但似乎这与博览会不兼容。

任何有关解决此问题的最佳方法的指导将不胜感激。再次抱歉，如果这个问题的答案很明显，我尝试搜索有关此的信息，但发现很少。

【问题讨论】：

您可以发布您的 AsyncStorage 代码吗？

标签： javascript react-native asyncstorage

【解决方案1】：

您在这里是正确的，我使用 AsyncStorage 的原因与您相同，它应该能够在 expo 服务器重新启动后获取您的数据。我相信您正在使用的情况：

AsyncStorage.setItem("exampleData")

为了再次检索exampleData，您必须使用：

AsyncStorage.getItem("exampleData")

并将 exampleData 存储到您的 redux 中。（我假设您使用的是 redux，但如果您不告诉我！）

您也可以在屏幕设置中实现此功能，以便应用的第一个屏幕检索该 AsyncStorage 数据。我会给你一个例子来说明我的代码是如何工作的。

这里我的导航设置为：

const MainNavigator = createSwitchNavigator({
  Startup: StartupScreen, // <-- This is the screen that gets the item
  StartAuth: StartSignup,
  Intro: IntroStack,
  Project: FullAppNavigator,
});

StartUpScreen 为：

import React, { useEffect } from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useDispatch } from "react-redux";
import { authenticate, logout } from "../store/actions/auth";
import { getUserData } from "../store/actions/user";

const StartupScreen = (props) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const tryLogin = async () => {
      const userData = await AsyncStorage.getItem("exampleData"); // <-- here
      if (!userData) {
        props.navigation.navigate("StartAuth");
        return;
      }
      const transformedData = JSON.parse(userData);
      const { localId, token, introing } = transformedData;

      if (!token || !localId) {
        props.navigation.navigate("StartAuth");
        return;
      }

      if (introing) {
        await dispatch(getUserData());
        await dispatch(authenticate(localId, token));
        await props.navigation.navigate("Intro");
      } else {
        await dispatch(getUserData());
        await dispatch(authenticate(localId, token));
        await props.navigation.navigate("Project");
      }
    };

    tryLogin();
  }, [dispatch]);

  return (
    <View style={styles.screen}>
      <ActivityIndicator size="large" color="white" />
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default StartupScreen;

如您所见，它从await AsyncStorage.getItem("exampleData") 获取项目，然后在检索到该项目后导航到下一个屏幕。在我的例子中，它接收到一个令牌，当它接收到该令牌时，它从操作getUserData 中获取另一个项目，然后导航。

走这条路线还允许您在从 AsyncStorage 检索数据时实现加载屏幕，正如您在 StartupScreen 中看到的 ActivityIndicator 所见。

【讨论】：