如何在 React Navigation 的 Drawer 内调用函数而不是屏幕？

【问题标题】：How to call function instead of screen inside Drawer on React Navigation?如何在 React Navigation 的 Drawer 内调用函数而不是屏幕？
【发布时间】：2019-11-27 00:09:04
【问题描述】：

我用过"react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.2",

并实现一个抽屉并在其中添加了我的项目，其中一个是“给我们打电话”，它应该打开一个电话，所以我用它链接而且我不知道这是否是在 RN-drawer 中调用函数而不是 Screen 作为默认值的好方法

所以我就这样做了但是在点击这个项目后，我的应用程序崩溃并停止工作！！那么我该如何实现呢？

const DrawerNavigator = createDrawerNavigator({
 ...
 CallUsDrawer: {
      screen: () => Linking.openURL(`tel:0597093830`),
      navigationOptions: {
        drawerLabel: 'call us',
        drawerIcon: () => <Icon name="ios-call" size={28} color="#1E558E" />,
      },
    },
 ...
});

【问题讨论】：

标签： javascript android react-native react-navigation react-navigation-drawer

【解决方案1】：

这是一个错误的方法。您应该为createDrawerNavigator 创建一个contentcomponent，并且应该有一个<Button> 或“给我们打电话”的东西。并在该组件的onPress 中编写逻辑Linking.openURL(tel:0597093830)

请检查，

https://reactnavigation.org/docs/en/drawer-navigator.html#providing-a-custom-contentcomponent

样本

const drawerNavigator = createDrawerNavigator(
  {
   ... screens here
  },
  {
    contentComponent: MenuScreen,
    drawerWidth: 300
  }
);

MenuScreen 是一个组件

【讨论】：