标签: react-navigation-drawer

我正在开发一个使用侧抽屉的 RN 应用程序。（RN 版本：0.59.8）

const DrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Poems: {
            screen: PoemsScreen
        },
        Contest: {
            screen: ContestScreen
        },
        AboutMe: {
            screen: AboutMeScreen
        }
    },
    DrawerConfig
);

export default createAppContainer(DrawerNavigator);

使用的 react-navigation 版本是 3.11.0。在菜单中，多个子项指向同一个页面，即 ViewPager，但具有不同的参数（页面索引）。问题是以下方法都不起作用：

1. 尝试使用推送而不是导航（返回_this2.props.navigation.push is not a function）
2. 试图重置相应的堆栈。

const resetAction = StackActions.reset({
   index: 0,
   key: 'Poems',
   actions: [NavigationActions.navigate({ routeName: 'Poems' })]
})
this.props.navigation.dispatch(resetAction)

（也试过key: null）

任何帮助深表感谢！

我遇到了一个问题，我基本上没有关于如何继续前进的想法。

我有一个带有两个屏幕的 StackNavigator，一个称为“HomeScreen”，另一个称为“SettingsScreen”。当我点击一个按钮时，我会进入“SettingsScreen”。

我还有一个 DrawerNavigator，我可以使用它导航到四个屏幕之一，屏幕 4 是 StackNavigator。

DrawerNavigator:
  Screen1
  Screen2
  Screen3
  Screen4
    - HomeScreen
    - SettingsScreen

（希望它以某种方式可以理解）

所以让我们来解决这个问题......
我的问题是我的“SettingsScreen”具有将项目添加到 AsyncStorage 键的功能（它将它推送到数组，所以最后我有一个列表，我在我的“主屏幕”上呈现)，但是当我添加了该项目并返回到我的“主屏幕”时，它不会重新加载页面。我怎样才能让它在满足某些条件甚至更简单时重新加载页面 - 每次离开“SettingsScreen”时如何重新加载页面？

我有多个屏幕，每个屏幕都是一个 stackNavigator。任何创建的 stackNavigator 都在抽屉内。在每个屏幕中，当按下 stackNavigator 标题的 BackButton 时，屏幕总是导航到 initialRoute 而不是回到上一个屏幕。

我测试navigation.goBack()和navigation.goBack(null)和 navigation.goBack()和navigation.goBack(this.props.navigation.state.key)}

但这些都没有奏效。这是我的代码：

    const MenuScreenNavigator = createStackNavigator({
    Menu: {
        screen: MenuScreen,
        navigationOptions: ({ navigation }) => ({
            headerLeft: (
                <HeaderBackButton
                    tintColor="white"
                    onPress={() => navigation.goBack()}
                />
            )
    }

我有多个屏幕导航器，例如菜单导航器：“加载”、“主页”、...屏幕。在继续我有抽屉导航器：

const drawerConfig = {
    drawerPosition: 'right',
    contentComponent: CustomDrawerContent,
    initialRouteName: "Load"
   }
   const routeConfig = {
    Menu: {
        screen: MenuScreenNavigator,
        navigationOptions: { title: strings.screenName.menu }
    },
    Load: { screen: AuthLoadingScreenNavigator },

    Login: {
        screen: LoginScreenNavigator,
        navigationOptions: { …

我正在使用以下方式创建导航系统

StackNavigator -> DrawerNavigator -> （屏幕 A、屏幕 B、屏幕 C）

屏幕A是初始路线

屏幕 A 到屏幕 B 使用

this.props.navigation.navigate("Screen B")  //Working Fine

屏幕 B 到屏幕 C 使用

this.props.navigation.navigate("Screen C")  //Working Fine

在屏幕 C 中

this.props.navigation.goBack() //Not Working

但

this.props.navigation.goBack(null) //It's going to Screen A instead of Screen B

这里出了什么问题。

请帮助我谢谢。

在第 4 版中，我在 contentComponent 中使用 DrawerItems onItemPress 重置了 StackNavigation：

const AppDrawerNavigator = createDrawerNavigator(
  {
    Stack1: {
       screen: Stack1,
       navigationOptions: { // options}
   },
   Stack2: {
      screen: Stack2,
      navigationOptions: { // options}
   },
  {
    initialRouteName: 'Stack1',
    contentOptions: {
      activeTintColor: '#346bc7',
    },
    contentComponent: props => {
      return (
        <ScrollView>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }} >
            <DrawerItems {...props} onItemPress={router => {
              const navigateAction = NavigationActions.navigate({
                routeName: router.route.routeName,
                params: {},
                action: NavigationActions.navigate({ routeName: router.route.routes[0].routeName }),
              });
              props.navigation.dispatch(navigateAction);
            }}
            />
          </SafeAreaView>
        </ScrollView>
      ) …

我尝试自定义react-navigation抽屉（v 5.x），因为我想在抽屉标题中添加公司信息。但这并不好，因为将自定义抽屉组件添加到抽屉会废弃抽屉上已经可用的任何导航项目列表（所有屏幕的名称）。下面是我的代码：

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

  </ScrollView>)
  
};

render(){
  return(
     <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerStyle={{
    width: 240,
  }} drawerContent={(props)=><CustomDrawerContentComponent {...props} />}>
        <Drawer.Screen name="Home" component={HomePage} options={{
          title: 'Home',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="home"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Menu" component={MenuNavigator} options={{
          title: 'Menu',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="list" …

createDrawerNavigation（）已移至react-navigation-drawer。有关更多详细信息，请参见https://reactnavigation.org/docs/4.x/drawer-navigator.html