如何使用 Drawer 自定义组件。我认为我正在按照医生的建议行事但行不通

Question

我正在尝试为我的 Expo RN 应用程序自定义抽屉，但是 经过数小时和数小时的无休止尝试后，我决定只寻求帮助。

我看到我正在做文档和互联网上其他人正在做的事情：

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

但在我的情况下，它根本行不通。我只看到这个红色的大错误：Error Screen

问题出在我的主导航：

 const MainNavigator = DrawerNavigator(
  {
    pedidosNavigator: { screen: PedidosNavigator },
    menuNavigator: { screen: MenuNavigator },
  },
  {
    contentComponent: props => <PerfilScreen {...props} />,
  }
);

如果我这样设置，它工作正常但是没有自定义:

const MainNavigator = DrawerNavigator(
      {
        pedidosNavigator: { screen: PedidosNavigator },
        menuNavigator: { screen: MenuNavigator },
      })

问题是当我按照文档建议添加此对象时：

{
  contentComponent: props => <PerfilScreen {...props} />,
}

甚至当我尝试添加宽度时属性:

{
 drawerWidth: 300
}

我到底做错了什么？这是我的完整代码

import React from 'react';
import { TabNavigator, StackNavigator, DrawerNavigator } from 'react-navigation';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/components/reducers';

import MenuScreen from './screens/MenuScreen';
import PerfilScreen from './screens/PerfilScreen';
import PedidosNuevosScreen from './screens/PedidosNuevosScreen';
import CreateEditMenuScreen from './screens/CreateEditMenuScreen';
import AcceptDeclineScreen from './screens/AcceptDeclineScreen';
import PedidosEnCursoScreen from './screens/PedidosEnCursoScreen';

export default class App extends React.Component {
render() {
  const MenuNavigator = TabNavigator({
      menu: { screen: MenuScreen },
      create: { screen: CreateEditMenuScreen }
      }
  );

  const PedidosNavigator = TabNavigator(
    {
      entrantes: { screen: StackNavigator(
        {
          entrantes: { screen: PedidosNuevosScreen },
          nuevoPedido: { screen: AcceptDeclineScreen }
        }
      ) },
      enCurso: { screen: PedidosEnCursoScreen }
    }
  );

const MainNavigator = DrawerNavigator(
  {
    pedidosNavigator: { screen: PedidosNavigator },
    menuNavigator: { screen: MenuNavigator },
  },
  {
    contentComponent: props => <PerfilScreen {...props} />,
  }
);

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

return (
  <Provider store={store}>
    <MainNavigator />
  </Provider>
);
}
}

感谢您的帮助！

Answer 1

经过更多小时的寻找答案，我确实找到了答案。抽屉导航器必须包含其他属性才能工作。

如果你像我一样，想要自定义抽屉，你还必须将这个道具添加到你的抽屉导航器中：

 {
 initialRouteName: 'YourMainRouteAsString',
 contentComponent: YourCustomizedComponent,
 drawerOpenRoute: 'DrawerOpen',
 drawerCloseRoute: 'DrawerClose',
 drawerToggleRoute: 'DrawerToggle'
}

如何使用 Drawer 自定义组件。我认为我正在按照医生的建议行事但行不通

How to use Drawer customComponent. I think Im doing what docs suggest but doesn't work

reactjs

react-native

react-navigation

expo