Как остановить автоматический сброс маршрута быстрого обновления до initialRoute в React Native

Question

Как поживаешь. Я использую React Native 0.62.2. Проблема в том, что при обновлении кода он автоматически переходит в initalRoute, поэтому мне нужно перейти к экрану, который я работал, чтобы проверить обновление. Как я могу остановить это, чтобы при обновлении кода быстрое обновление отображало обновление на текущем экране?

"react": "16.11.0",
"react-native": "0.62.2",
"@react-navigation/bottom-tabs": "^5.2.7",
"@react-navigation/drawer": "^5.5.0",
"@react-navigation/material-bottom-tabs": "^5.1.9",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10",

Спасибо

Answer 1

Для тех, кто сталкивается с этой проблемой с React Native Web .

Я исправил это, настроив связывание с помощью React Navigation.

      const config = {
  screens: {
    Login: 'login',
    Home: '',
    About: 'about',
  },
};

const linking = {
  prefixes: ['https://example.com',],
  config,
};

<NavigationContainer linking={linking}>
  ...
</NavigationContainer>

После настройки привязки быстрое обновление больше не сбрасывало навигацию на первый маршрут.

Answer 2

Может, вы можете попробовать этот способ. Я следую документу о сохранении состояния React Navigation, чтобы записать код ниже.

https://reactnavigation.org/docs/state-persistence/

import * as React from 'react';
import { Linking, Platform } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { NavigationContainer } from '@react-navigation/native';

const PERSISTENCE_KEY = 'NAVIGATION_STATE';

export default function App() {
  const [isReady, setIsReady] = React.useState(__DEV__ ? false : true);
  const [initialState, setInitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        const initialUrl = await Linking.getInitialURL();

        if (Platform.OS !== 'web' && initialUrl == null) {
          // Only restore state if there's no deep link and we're not on web
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString ? JSON.parse(savedStateString) : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        }
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) {
  return <ActivityIndicator />;
}

  return (
    <NavigationContainer
      initialState={initialState}
      onStateChange={(state) =>
        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
      }
    >
      {/* ... */}
    </NavigationContainer>
  );
}

Answer 3

Вы можете написать компонент, который записывает состояние навигации и сохраняет его в asyncStorage. Может как то так:

import { InitialState, NavigationContainer } from "@react-navigation/native";
import React, { useCallback, useEffect, useState } from "react";
import { AsyncStorage } from "react-native";

const NAVIGATION_STATE_KEY = `NAVIGATION_STATE_KEY-${sdkVersion}`;

function NavigationHandler() {
  const [isNavigationReady, setIsNavigationReady] = useState(!__DEV__);
  const [initialState, setInitialState] = useState<InitialState | undefined>();

  useEffect(() => {
    const restoreState = async () => {
      try {
        const savedStateString = await AsyncStorage.getItem(
          NAVIGATION_STATE_KEY
        );
        const state = savedStateString
          ? JSON.parse(savedStateString)
          : undefined;
        setInitialState(state);
      } finally {
        setIsNavigationReady(true);
      }
    };

    if (!isNavigationReady) {
      restoreState();
    }
  }, [isNavigationReady]);

  const onStateChange = useCallback(
    (state) =>
      AsyncStorage.setItem(NAVIGATION_STATE_KEY, JSON.stringify(state)),
    []
  );

  if (!isNavigationReady) {
    return <AppLoading />;
  }

  return (
    <NavigationContainer {...{ onStateChange, initialState }}>
      {children}
    </NavigationContainer>
  );
}

Я бы проверил компонент LoadAsset Typescript из @wcandillon здесь