我在React Navigation和React Native 的导航方面遇到了问题.它是关于重置导航并返回主屏幕.
我在DrawerNavigator中构建了一个StackNavigator,主屏幕和其他屏幕之间的导航工作正常.但问题是,导航堆栈的增长和增长.我不知道如何从堆栈中删除屏幕.
例如,当从主屏幕进入设置屏幕,然后进入输入屏幕并最后再次进入主屏幕时,主屏幕在堆栈中是两次.使用后退按钮我不会离开应用程序,但再次进入输入屏幕.
再次选择主页按钮时,堆栈的重置会很好,但我不知道如何执行此操作.这里有人试图帮助其他有类似问题的人,但解决方案对我不起作用.
const Stack = StackNavigator({
Home: {
screen: Home
},
Entry: {
screen: Entry
},
Settings: {
screen: Settings
}
})
export const Drawer = DrawerNavigator({
Home: {
screen: Stack
}},
{
contentComponent: HamburgerMenu
}
)
Run Code Online (Sandbox Code Playgroud)
这是抽屉屏幕的一个简单示例
export default class HamburgerMenu extends Component {
render () {
return <ScrollView>
<Icon.Button
name={'home'}
borderRadius={0}
size={25}
onPress={() => { this.props.navigation.navigate('Home')}}>
<Text>{I18n.t('home')}</Text>
</Icon.Button>
<Icon.Button
name={'settings'}
borderRadius={0}
size={25}
onPress={() => { this.props.navigation.navigate('Settings')}}>
<Text>{I18n.t('settings')}</Text>
</Icon.Button>
<Icon.Button …Run Code Online (Sandbox Code Playgroud) 我有以下路线结构:
StackNavigator
-StackNavigator
-TabNavigator
--Tab1
---Route 1 (Stack) (initial)
---Route 2 (Stack)
--Tab2
---Route 3 (Stack) (initial)
---Route 4 (Stack)
Run Code Online (Sandbox Code Playgroud)
当我访问Tab1 -> Route 1 -> Route 2 -> Tab2并返回时Tab1,活动路径是2而不是initialRoute1.
我正在做以下事情:
tabBarOnPress: ({ scene }) => {
const { route } = scene;
const tabRoute = route.routeName;
const { routeName } = route.routes[0];
navigation.dispatch(NavigationActions.navigate({ routeName: tabRoute }));
navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName }),
],
}));
},
Run Code Online (Sandbox Code Playgroud)
但问题是它首先显示Route 2然后导航到Route 1. …
我的应用程序有一个 TabNavigator,每个选项卡中都有一个 StackNavigator。通过单击不同的选项卡在堆栈之间导航时,我不会重置堆栈,因此当您更改选项卡时,堆栈包含以前的状态。但是,偶尔从一个选项卡中的屏幕中,我想导航到不同选项卡中的特定屏幕,在这种情况下,我想重置目标选项卡中的堆栈。
TabNavigator
Tab1
StackNavigator
- ScreenA
- ScreenB
Tab2
StackNavigator
- Screen1
- Screen2
Run Code Online (Sandbox Code Playgroud)
我希望能够在 Screen2 上放置一个按钮来重置 Tab1 上的堆栈。
我想知道此处文档中提到的“目标”参数是否有帮助,但没有关于如何使用它的示例。https://reactnavigation.org/docs/navigation-actions/
(我在这里搜索过,但为 4.x 建议的答案似乎不再适用)。谢谢!
react-native-navigation react-navigation react-navigation-v5