Question

如何在 React Native 导航时打开下一个屏幕的模式？

2022-08-05

1748

javascript reactjs react-native

我想通过将道具传递为 { showModal: true } 来从我当前的屏幕（假设 A）打开另一个屏幕（假设 B）的模式。

在我的屏幕 A 中，我已经将道具从 A 传递到 B，例如：

Navigation.push(componentId,'B',null,{showModal: true});

在我的屏幕 B 中，我获得了道具 showModal 并打开屏幕 B 的模式，例如：

 useEffect(() => {
  // some async API calls

 },[]);

 useEffect(() => {
    if (showModal) {
      setTimeout(() => modalRef.current?.setModal(true), 4000); // inside the async function call
    }
  }, []);

在这里您可以看到我已经使用 ref 显示了模式，但没有状态，因为存在其他邻居状态，这导致了重新渲染问题并且模式没有打开。在这种情况下，由于还有一些其他异步 API 调用，我延迟了模式的打开，因此模式会打开。

所以我的问题是，除此之外还有其他替代解决方案吗？

Answer 1

我认为 setTimeout 是错误的方法，因为任何人都不知道 API 获取的时间，因此，您可以在所有 API 成功获取后打开模型。

Answer 2

您可以使用 AppNavigator 转到下一个屏幕。

import {NativeStackNavigationProp} from '@react-navigation/native-stack';     
import {AppNavigator} from '@navigators';
 
const goToFinanceScreen = () => {
    navigation.navigate('test');
  };