如何在 React Native 中自动停止快速刷新重置路由到 initialRoute答案

【问题标题】：How to stop Fast refresh reset route to initialRoute automatically in React Native如何在 React Native 中自动停止快速刷新重置路由到 initialRoute
【发布时间】：2020-11-29 22:40:21
【问题描述】：

你好吗。我正在使用 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",

谢谢

【问题讨论】：

标签： react-native react-navigation fast-refresh

【解决方案1】：

您可以编写一个组件来记录导航的状态并将其存储在 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>
  );
}

我会检查来自 @wcandillon here 的 LoadAsset Typescript 组件

【讨论】：

【解决方案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>
  );
}

【讨论】：

【解决方案3】：

对于那些使用 React Native Web 遇到此问题的人。

我通过使用 React Navigation 配置 Linking 解决了这个问题。

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

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

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

设置链接后，快速刷新不再将导航重置为第一条路线。

【讨论】：