[英]react navigation v6 and v5, Disable swipe back action
I'm working with react navigation 5:我正在使用反应导航 5:
I created MainStackScreen and AuthStackScreen,我创建了 MainStackScreen 和 AuthStackScreen,
const AuthStack = createStackNavigator();
function AuthStackScreen() {
return (
<AuthStack.Navigator headerMode="none">
<AuthStack.Screen name="Main" component={Main} />
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Registration" component={Registration} />
<AuthStack.Screen name="Home" component={DrawerNavigator} />
<AuthStack.Screen name="Notifications" component={Notifications} />
<AuthStack.Screen name="SmsValidation" component={SmsValidation} />
<AuthStack.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
</AuthStack.Navigator>
);
}
MainStackScreen:主堆栈屏幕:
const MainScreen = createStackNavigator();
function MainStackScreen({navigation}) {
return (
<MainScreen.Navigator>
<MainScreen.Screen name="Main" component={Main} />
<MainScreen.Screen name="SmsValidation" component={SmsValidation} />
<MainScreen.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
</MainScreen.Navigator>
);
}
I want to prevent IOS swipe action back between Login my screens我想防止 IOS 在登录我的屏幕之间向后滑动操作
You can set gestureEnabled to false in a screen like:您可以在如下屏幕中将 gestureEnabled 设置为 false:
<AuthStack.Screen
name="Login"
component={Login}
options={{gestureEnabled: false}}
/>
Or the whole navigator like:或者整个导航器像:
<AuthStack.Navigator screenOptions={{gestureEnabled: false}}>
...
</AuthStack.Navigator>
/* -------------------------------------------------------------------------- */
/* AUTH STACK */
/* -------------------------------------------------------------------------- */
const AuthStack = createStackNavigator();
function AuthStackScreen() {
return (
<AuthStack.Navigator headerMode="none">
<AuthStack.Screen name="Main" component={Main} />
<AuthStack.Screen name="Login" component={Login} options={{gestureEnabled: false}} />
<AuthStack.Screen
name="Registration"
component={Registration}
options={{gestureEnabled: false}}
/>
<AuthStack.Screen name="Home" component={DrawerNavigator} options={{gestureEnabled: false}} />
<AuthStack.Screen
name="Notifications"
component={Notifications}
options={{gestureEnabled: false}}
/>
<AuthStack.Screen
name="SmsValidation"
component={SmsValidation}
options={{gestureEnabled: false}}
/>
<AuthStack.Screen
name="MoreRegistrationInfo"
component={MoreRegistrationInfo}
options={{gestureEnabled: false}}
/>
</AuthStack.Navigator>
);
}
You can set a beforeRemove
listener to prevent going back.您可以设置一个
beforeRemove
侦听器以防止返回。 React Navigation Docs反应导航文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.