导航需要一些时间才能转到主屏幕

Question

我正在尝试导航到用户名字已经存在的主屏幕，否则停留在这个入门屏幕上，但问题是即使名字存在，也需要 1-2 秒才能导航到主屏幕，然后加载程序不会显示，它会显示入门屏幕的主要内容 1-2 秒，然后导航到主屏幕，如何阻止这种情况发生？

const userDetails = useSelector(state => state.auth.userDetails);

const [loader, setLoader] = useState(true);
  

  const navigateToHomeIfNeeded = () => {
    if (userDetails?.firstName && userDetails?.firstName.length > 0) {
      navigation.navigate('Home');
      setLoader(false);
      
    } else {
      setLoader(false);
      
    }
  };
  useEffect(() => {
     setLoader(true);
    
    navigateToHomeIfNeeded();
  });


 return (
    <>
      {loader  ? (
        <View
          style={{
            zIndex: 0,
            bottom: 0,
            left: width / 2 - 30,
            right: 0,
            top: 250,
            position: 'absolute',
          }}>
          <Lottie
            style={{
              maxWidth: 60,
              maxHeight: 60,
            }}
            source={require('./assets/loaderlottie.json')}
            autoPlay
            lo
          />
        </View>
      ) : (
//main content
)
}

Answer 1

您应该根据反应方法将依赖与 useeffect 挂钩一起使用

  useEffect(() => {
     setLoader(true);
    
    navigateToHomeIfNeeded();
  },[navigateToHomeIfNeeded]);

现在如果你的导航功能发生变化，useeffect将会调用，你的性能将会提高