Javascript 无法读取属性'；routeName'；未定义的反应导航

我正在尝试为我的抽屉布局使用自定义组件。下面是我的自定义抽屉组件：

CustomDrawer.js:

class CustomDrawer extends Component {

  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 1
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}>
              Page1
              </Text>
            </View>
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}>
                Page2
              </Text>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}>
                Page3
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

CustomDrawer.propTypes = {
  navigation: PropTypes.object
};

export default CustomDrawer;

const styles = StyleSheet.create({
  container: {
     paddingTop: 20,
     flex: 1
   },
   navItemStyle: {
     padding: 10
   },
   navSectionStyle: {
     backgroundColor: 'lightgrey'
   },
   sectionHeadingStyle: {
     paddingVertical: 10,
     paddingHorizontal: 5
   },
   footerContainer: {
     padding: 20,
     backgroundColor: 'lightgrey'
   }
});

类CustomDrawer扩展组件{
导航屏幕=（路线）=>（）=>{
const navigateAction=NavigationActions.navigate({
路由名称：路由
});
这个.props.navigation.dispatch（navigateAction）；
}
渲染（）{
返回(
第一节
第1页
第二节
第2页
第3页
这是我的固定页脚
);
}
}
CustomDrawer.propTypes={
导航：PropTypes.object
};
导出默认CustomDrawer；
const styles=StyleSheet.create({
容器：{
paddingTop:20，
弹性：1
},
navItemStyle：{
填充：10
},
导航剖面样式：{
背景颜色：“浅灰色”
},
章节标题样式：{
填充垂直：10，
水平方向：5
},
页脚容器：{
填充：20，
背景颜色：“浅灰色”
}
});

下面是我的路由器.js：

const mapNavigationStateParamsToProps = (SomeComponent) => {
  return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
            const {navigation: {state: {params}}} = this.props
            return <SomeComponent {...params} {...this.props} />
        }
    }
}

export const MainScreenNavigator = TabNavigator({
 Home: {
   screen: Home,
  navigationOptions : {
     tabBarLabel: 'Home',
     tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
   },
 },
 MyCards: {
   screen: MyCards,
   navigationOptions : {
    tabBarLabel: 'My Cards',
    tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
  },
 },

},
 {
   tabBarPosition: 'bottom',
   animationEnabled: true,
   tabBarOptions: {
     activeTintColor: '#e91e63',
   },
 },
);

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  }, {
    contentComponent: CustomDrawer,
    drawerWidth: 300
  }

);

drawerNavigation.navigationOptions = {
    header: null,
};

export const AppNavigation = StackNavigator({
    LoginScreen: { screen: Login},
    SignUpScreen: { screen: SignUp },
    Tabs: { screen: drawerNavigation},
    AddCard: { screen: AddCard },
    GetCard: {screen: GetCard},
    SearchedUserProfile: {screen: mapNavigationStateParamsToProps(SearchedUserProfile) }
  },
  {
   headerMode: 'screen'
 });

const-mapNavigationStateParamsToProps=（SomeComponent）=>{
返回类扩展组件{
静态navigationOptions=SomeComponent.navigationOptions；//最好使用非反应静态
render（）{
const{navigation:{state:{params}}}=this.props
返回
}
}
}
导出常量MainScreenNavigator=TabNavigator({
主页：{
屏幕：主页，
导航选项：{
tabBarLabel:“主页”，
tabBarIcon:（{tintColor}）=>
},
},
我的名片：{
屏幕：MyCards，
导航选项：{
tabBarLabel:“我的卡”，
tabBarIcon:（{tintColor}）=>
},
},
},
{
tabBarPosition:'底部'，
animationEnabled：没错，
选项卡选项：{
activeTintColor:“#e91e63”，
},
},
);
导出常数pawernavigation=pawernavigator({
主页：{
屏幕：主页，
},
我的名片：{
屏幕：MyCards，
},
简介：{
屏幕：配置文件，
},
搜索用户：{
屏幕：搜索用户
},
信用卡申请：{
屏幕：CardRequests
},
获取卡：{
屏幕：GetCard
}
}, {
contentComponent:CustomDrawer，
抽屉宽度：300
}
);
抽屉导航选项={
标题：null，
};
导出常量AppNavigation=StackNavigator({
登录屏幕：{screen:Login}，
SignUpScreen:{screen:SignUp}，
选项卡：{screen:drawerNavigation}，
AddCard:{屏幕：AddCard}，
GetCard:{屏幕：GetCard}，
SearchedUserProfile:{屏幕：mapNavigationStateParamsToProps（SearchedUserProfile）}
},
{
headerMode:“屏幕”
});

当我运行应用程序时，出现以下错误：

无法读取未定义的属性“routeName”

---

我正在

CustomDrawer

中使用

routerName

。谁能告诉我我做错了什么吗？

我通过添加以下内容解决了问题：

 drawerOpenRoute: 'DrawerOpen',
 drawerCloseRoute: 'DrawerClose',
 drawerToggleRoute: 'DrawerToggle',

完整的抽屉导航器：

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  },{
      contentComponent: SideMenu,
      drawerWidth: 300,
      drawerOpenRoute: 'DrawerOpen',
      drawerCloseRoute: 'DrawerClose',
      drawerToggleRoute: 'DrawerToggle',
  });

---

希望这有助于解决两个问题。是routerName还是routerName？您的代码显示routeName，但错误显示routerName。此外，您的路由定义在哪里？因为您正在导航到“Page1”，但我看不到它的定义。它是routeName，我只是在测试它。第1页是Dummy我一打开应用程序就收到了错误，我假设您从CustomDrawer.js中的“react navigation”导入了{NavigationActions}，或者没有拼写错误。不，这一切都很好