使用反应导航延迟屏幕之间的导航

Posted 2023-02-23

【中文标题】使用反应导航延迟屏幕之间的导航

【英文标题】：Delaying Navigation between screens with react navigation

【发布时间】：2020-12-03 14:07:45

【问题描述】：

我想要实现的是当用户点击一个屏幕导航到另一个屏幕时，我希望屏幕之间的转换延迟 1 秒或 2 秒。

我不知道这是否可能在

反应导航

.

我有这段代码可以从home 转换到profile 屏幕。

    import * as React from 'react';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => 
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component=HomeScreen
          options= title: 'Welcome' 
        />
        <Stack.Screen name="Profile" component=ProfileScreen />
      </Stack.Navigator>
    </NavigationContainer>
  );

这是home 屏幕代码

const HomeScreen = ( navigation ) => 
  return (
    <Button
      title="Go to Jane's profile"
      onPress=() =>
        navigation.navigate('Profile',  name: 'Jane' )
      
    />
  );
;

这是profile 屏幕代码。

const ProfileScreen = ( navigation, route ) => 
  return <Text>This is route.params.name's profile</Text>;
;

;

可以延迟时间从home 屏幕移动到profile 屏幕

【问题讨论】：

您可以使用 setTimeout 函数来延迟操作。 setTimeout(()=> navigation.navigate('Profile', name: 'Jane' ) ,2000);但我可以问为什么吗？您想在这里实现什么目标？

这就是他的客户想要的

嗯，setTimeout函数会等到超时执行回调函数。这将解决您的问题。但我不认为在您的应用程序代码中有这样一个硬编码延迟是一个好习惯。

我知道并试图说服他不要这样做，但他拒绝了，坚称这就是他想要的

【参考方案1】：

正如@nithinpp 建议的那样，您可以通过在主屏幕按钮 onClick 中添加 2 秒的 setTimeout 来实现此目的。

const HomeScreen = ( navigation ) => 
  return (
    <Button
      title="Go to Jane's profile"
      onPress=() => 
        setTimeout(()=> 
         navigation.navigate('Profile',  name: 'Jane' );
        , 2000);
      
    />
  );
;

我真的没有理由在任何应用程序中使用此代码，因为在应用程序代码中硬编码延迟根本不是一个好习惯。