使用 useEffect 的条件渲染和堆栈导航

Question

在我的应用程序中，有一个首次使用该应用程序的入门屏幕。当用户跳过它时，它会在 AsyncStorage 中保存一个值为 'true' 的变量，这意味着用户已经看到了 Onboarding。

在App.js中我调用了一个useEffect挂钩来验证变量的值。由于变量等于 'true' 它应该导航到主屏幕。问题是 useEffect 不够快，无法按时获取变量，它总是会转到条件的 'else' 部分。我如何以一种方式进行编码，使 useEffect 在进入任何屏幕之前必须加载？

export default function App() {
  const [boarding, setBoarding] = useState("");

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem("@storage_Key");
      console.log(value);
      if (value !== null) {
        setBoarding(value);
      }
    } catch (e) {
      // error reading value
    }
  };

  useEffect(() => {
    getData();
  });
  if (boarding == "true") {
    <NavigationContainer>
      <MainStackNavigator
        initialRoute={"Home"}
      />
    </NavigationContainer>;
  }else{
    return (
      <NavigationContainer>
        <MainStackNavigator
          initialRoute={"Onboarding"}
        />
      </NavigationContainer>
    );
  }
}

Answer 1

一个潜在的解决方案可能是使用 react-native-splash-screen 包在执行此类逻辑时保持启动画面可见。此解决方案将确保 Onboarding 屏幕不会意外可见。

const getData = async () => {
  try {

  } catch(e) {

  } finally {
    SplashScreen.hide(); // Called from react-native-splash-screen
  }
};

在初始屏幕隐藏的位置，您已完成异步任务并且 boarding 状态变量设置为您期望的值。

另一种方法是在 getData 执行时向用户呈现加载指示器。完成后，加载指示器将消失，并显示正确的 route。

使用 useEffect 的条件渲染和堆栈导航

Conditional rendering and stack navigation using useEffect

react-native

react-navigation

react-hooks