如何解决React Native:如何从导航堆栈中删除当前的堆栈导航器
我正在为一种情况而苦苦挣扎。所以我有三个堆栈导航器。
-
navigator1 =>屏幕1
-
navigator2 =>屏幕2
-
navigator3 =>屏幕3,屏幕4,屏幕5
我从screen1
导航到screen2
。然后从screen2
到screen3
,然后是screen4
然后是screen5
,然后再次导航到screen2
。但是现在当我在screen2
上时,按onBack键我不想继续在screen5
上,而是想直接在screen1
上进行。
当我尝试使用下面的代码从screen5
导航到screen4
之前,从堆栈中弹出screen3
,screen2
和screen5
时。它没有用,screen3
仍然保留在堆栈中。
import { StackActions } from '@react-navigation/native';
navigation.dispatch(
StackActions.popToTop()
);
OR
import { StackActions } from '@react-navigation/native';
navigation.dispatch(
StackActions.pop(3)
);
如何从导航堆栈中删除navigator3
?这样我就不会再在BackBackPress上从screen5
继续进行screen2
了
我正在使用反应导航版本5.x。
解决方法
查看此示例,即可根据需要运行
import * as React from 'react';
import { View,Button,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const A = ({ navigation }) => {
return (
<View>
<Text>A</Text>
<Button title={'Next'} onPress={() => navigation.navigate('Second')} />
</View>
);
};
const B = ({ navigation }) => {
return (
<View>
<Text>B</Text>
<Button
title={'Next'}
onPress={() => navigation.navigate('Third',{ screen: 'C' })}
/>
</View>
);
};
const C = ({ navigation }) => {
return (
<View>
<Text>C</Text>
<Button
title={'Next'}
onPress={() => navigation.navigate('Third',{ screen: 'D' })}
/>
</View>
);
};
const D = ({ navigation }) => {
return (
<View>
<Text>D</Text>
<Button
title={'Next'}
onPress={() => navigation.navigate('Third',{ screen: 'E' })}
/>
</View>
);
};
const E = ({ navigation }) => {
return (
<View>
<Text>E</Text>
<Button title={'Next'} onPress={() => navigation.navigate('Second')} />
</View>
);
};
const FirstStackScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen name="A" component={A} />
</Stack.Navigator>
);
};
const SecondStackScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen name="B" component={B} />
</Stack.Navigator>
);
};
const ThirdStackScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen name="C" component={C} />
<Stack.Screen name="D" component={D} />
<Stack.Screen name="E" component={E} />
</Stack.Navigator>
);
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="First" component={FirstStackScreen} />
<Stack.Screen name="Second" component={SecondStackScreen} />
<Stack.Screen name="Third" component={ThirdStackScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
,
为什么当用户单击Screen1
按钮时您不能直接导航到back
?
const onBack = () => {
navigation.navigate('Screen1');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。