[英]Delaying Navigation between screens with react navigation
我想要实现的是当用户点击一个屏幕导航到另一个屏幕时,我希望屏幕之间的转换延迟 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
屏幕
正如@nithinpp 建议的那样,您可以通过在主屏幕按钮 onClick 中添加setTimeout
for 2s 来实现此目的。
const HomeScreen = ({ navigation }) => {
return (
<Button
title="Go to Jane's profile"
onPress={() => {
setTimeout(()=> {
navigation.navigate('Profile', { name: 'Jane' });
}, 2000);
}}
/>
);
};
我真的看不出在任何应用程序中使用此代码的理由,因为在应用程序代码中硬编码延迟根本不是一个好习惯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.