相关疑难解决方法(0)

重置主屏幕的导航堆栈(React Navigation和React Native)

我在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)

javascript navigation react-native react-navigation

40
推荐指数
6
解决办法
4万
查看次数

React Navigation TabNavigator:重置选项卡更改上的上一个选项卡

我有以下路线结构:

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. …

reactjs react-native react-navigation

7
推荐指数
2
解决办法
2075
查看次数

如何使用 React Navigation 5.x 在不同的选项卡中重置堆栈

我的应用程序有一个 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

7
推荐指数
1
解决办法
2121
查看次数