将道具传递到DrawerNavigator中的contentComponent

Question

具有反应导航功能的本机应用程序。我的导航正常工作，但是当我从CustomNavigationDrawer.js文件添加contentComponent时出现错误：

如果我将CustomNavigationDrawer.js中的代码直接粘贴到我的navigation.js中，它可以工作，但我希望将该组件保存在其他文件中，以便可以将其分开。

我尝试搜索问题，结果如下：

结构：

├── screens
│   ├── LoginScreen.js
│   ├── index.js
│   └── MainScreen.js
│   └── etc...
├── navigation
│   ├── Navigation.js
├── component
│   ├── CustomNavigationDrawer.js
│   ├── index.js

Index.js：

export { CustomDrawerNavigator } from './CustomDrawerNavigator';
export { CustomHeader } from "./CustomHeader";

CustomDrawerNavigator.js：

import React from "react";
import { View, StyleSheet } from "react-native";
import { DrawerItems } from "react-navigation";

export const CustomDrawerNavigator = (props) => (
  <View style={[styles.container]}>
    <DrawerItems
      activeBackgroundColor={"black"}
      activeTintColor={"white"}
      iconContainerStyle={styles.icons}
      {...props}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },

  icons: {
    width: 30
  }
});

Navigation.js：

import CustomDrawerNavigator from "../component";
...

const MainNavigator = createDrawerNavigator(
  {
    Main: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="md-home" style={{ color: tintColor }} />
        ),
        drawerLabel: "Main"
      },
      screen: MainScreen
    },

    Login: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="md-settings" style={{ color: tintColor }} />
        ),
        drawerLabel: "Login"
      },
      screen: LoginScreen
    },

    Profile: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="ios-person" style={{ color: tintColor }} />
        ),
        drawerLabel: "Profile"
      },
      screen: ProfileScreen
    }
  },
  {
    contentComponent: props => <CustomDrawerNavigator {...props} />
  }
);

...

有人可以帮助我显示其他文件中的contentCompenent吗？

Answer 1

import CustomDrawerNavigator from "../component";

上面的行期望您的组件使用default export ...但是没有找到

通过以下方式获取命名的出口：

import { CustomDrawerNavigator } from "../component";

Answer 2

我认为这是因为contentComponent需要一个类组件，而不是使用react-navigation，而是使用react-navigation-drawer导入createDrawerNavigaor和DrawerNavigatorItems（使用它代替DrawerItems）

import { createDrawerNavigator,DrawerNavigatorItems } from "react-navigation-drawer";