Блог

Извините, если это довольно простой вопрос, я новичок в родной и мобильной разработке в целом.

Недавно я начал создавать мобильное приложение с использованием expo и react native, но при этом столкнулся с проблемой. То, что я пытаюсь сделать, — это создать страницу, на которой пользователи могут редактировать данные профиля, которые не требуется хранить в бэкэнде. Мне нужно, чтобы эти текстовые поля сохранялись постоянно до тех пор, пока пользователь потенциально не отредактирует их позже.

Первоначально казалось, что использование AsyncStorage было бы правильным решением, однако я обнаружил, что при закрытии сервера expo и его перезапуске текст удаляется и заменяется заполнителями. Означает ли это, что я неправильно настроил AsyncStorage, или это просто природа expo? Сохранятся ли эти данные навсегда, если рассматриваемое приложение действительно было экспортировано и развернуто? Я подумывал вместо этого использовать что-то вроде realm, но, похоже, это несовместимо с expo.

Мы будем признательны за любые рекомендации по наилучшему подходу к этой проблеме. Опять же, извините, если ответ на этот вопрос очевиден, я попытался найти информацию об этом, но нашел очень мало.

Вы на правильном пути, я использую AsyncStorage по той же причине, что и вы, и он сможет получить ваши данные после перезагрузки сервера expo. Я верю, что в вашем случае вы используете:

 AsyncStorage.setItem("exampleData")
 

И для того, чтобы получить это exampleData снова, вы должны использовать:

 AsyncStorage.getItem("exampleData")
 

И сохраните это exampleData в своем редакторе. (Я предполагаю, что вы используете redux, но если вы этого не сделаете, дайте мне знать!)

Вы также можете реализовать это в настройках экрана, чтобы первый экран вашего приложения извлекал данные AsyncStorage. Я приведу вам пример того, как работает мой код.

Здесь моя навигация настроена следующим образом:

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

И экран стартапа, как:

 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 на этом экране запуска.