Question

最重要的是，我必须精确搜索arround，例如https://github.com/react-community/react-navigation/issues/1000，https://github.com/react-community/react-navigation/issues/307甚至是StackOverflow。

我有以下代码：

/****  STACKNAVIGATOR 2 ****/
const HomeDrawer = StackNavigator({
   HomeDrawerstack: { screen: Home, navigationOptions: { title: 'Accueil',  } },    
  }, { initialRouteName: 'HomeDrawerstack', }    
 );

/****  STACKNAVIGATOR 3 ****/
const AddIdeaDrawer = StackNavigator({
   AddIdeaDrawerRoot: { screen: AddIdea, navigationOptions: { title: 'AddIDea',  } },    
  }, { initialRouteName: 'AddIdeaDrawerRoot', }    
 );

/****  DRAWERNAVIGATOR ****/
const DrawerRoutes = {
    HomeRoot: {
      screen: HomeDrawer, 
      navigationOptions: {
          title: 'Home',
      },
    },
    AddIdea: {
      screen: AddIdeaDrawer 
      navigationOptions: { 
        title: 'Add an idea',
      },
    },
};

const DrawerOptions = {
  initialRouteName: 'HomeRoot',
  contentComponent: CustomDrawerContentComponent,  
  drawerWidth: 300,
}; 

export const Drawer = DrawerNavigator(DrawerRoutes, DrawerOptions); 


/****  STACKNAVIGATOR 1 ****/
export const Navigation = StackNavigator({  
   HomeDrawerRoot: { screen: Drawer, navigationOptions: { header: null } },    
   OtherRoot: { screen: Contacts, navigationOptions: { /** **/ } }, 
  }, { initialRouteName: 'HomeDrawerRoot', }    
 );

我尝试了什么

目前，我正在尝试使用StackNavigator动画从HomeDrawerstack导航到AddIdeaDrawerRoot并阻止用户返回。我尝试过在不同问题上找到的不同解决方案，但其中任何一个都解决了这个问题。

首先尝试：

navigate('AddIdea',)} 该应用程序完美地转到了AddIdea。但是，用户可以返回（这是正常的我不使用RESET）并且没有动画。 AddIdea屏幕显示为没有任何转换。

第二次尝试：

NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({routeName: 'AddIdea',})
          ]
})

它不起作用。日志打印：There is no route defined for key AddIdea. Must be one of: 'HomeDrawerstack'

第三次尝试：

我读了另一个问题https://github.com/react-community/react-navigation/issues/#1127，它解释了关键：null是解决方案。所以我尝试了以下行动：

NavigationActions.reset({
          index: 0,
          key: null,
          actions: [
            NavigationActions.navigate({
              routeName: 'HomeDrawerRoot',
              action: NavigationActions.navigate({ routeName: 'AddIdea',}),
              })
          ]
 })

该应用程序适用于AddIdea。但是，仍有可能返回到最后一页（主页）并且没有动画。

第四次尝试：

navigate({
    routeName: 'HomeDrawerRoot',
    action: NavigationActions.navigate({ 
        routeName: 'AddIdea', action: NavigationActions.reset({
                        index: 0,
                        actions: [
                            NavigationActions.navigate({ routeName: AddIdeaDrawerRoot
                        ]
                        })
            })
})

它不起作用。打印：There is no route defined for key AddIdeaDrawerRoot. Must be one of: 'HomeDrawerstack'

我正在尝试做什么

我唯一想要的是从HomeDrawerstack（主屏幕）到AddIdeaDrawerRoot（AddIdea屏幕）。使用类似StackNavigator动画的动画并阻止用户返回。（禁用后退操作）。

在阅读了很多问题之后，我没有找到任何解决方案。它是否忘记了反应导航？或者我是问题？！提前谢谢。

<小时/>

我当前的配置

| software         | version
| ---------------- | -------
| react-navigation |  ^1.0.0-beta.11
| react-native     |  0.45.1
| node             | 7.4.0
| npm or yarn      |  0.24.5

Answer 1

我有类似的问题，找不到一个好的示例应用程序。我的应用程序中的导航崩溃了应用程序非常令人沮丧。最后，我发现了一个很好的工作项目，我的代码基于：https://github.com/paraswatts/DrawerNavigatorReactNative/

这个项目有标签和抽屉的工作导航，没有崩溃和干净的代码。我希望它可以帮到你。

重置导航 - 带动画的抽屉路线

我尝试了什么

我正在尝试做什么

我当前的配置

1 个答案: