如何在 React Native 中永久存储文本字段？

Question

很抱歉，如果这是一个相当基本的问题，我是 React 原生和移动开发的新手。

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

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

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

Answer 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 检索数据时实现加载屏幕，正如您在启动屏幕中看到的 ActivityIndicator。

如何在 React Native 中永久存储文本字段？

How can I store a text field permanently in react native?

javascript

react-native

asyncstorage