将道具传递给DrawerNavigator中的contentComponent

Question

具有反应导航的本机应用程序。我有我的导航工作，但当我从CustomNavigationDrawer.js文件添加contentComponent时，我收到一个错误：

如果我直接在我的navigation.js中粘贴CustomNavigationDrawer.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";

自定义抽屉Navigation.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";