Javascript 将道具传递给DroperNavigator中的contentComponent

带有react导航的本机应用程序。我的导航功能正常，但当我从CustomNavigationDrawer.js文件中添加contentComponent时，出现了一个错误：

如果我将CustomNavigationDrawer.js中的代码直接粘贴到我的navigation.js中，它可以工作，但我希望该组件位于不同的文件中，以便将其分开

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

结构：

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

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

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
  }
});

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} />
  }
);

...

Index.js:

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

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

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
  }
});

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} />
  }
);

...

CustomDrawerNavigator.js:

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

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

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
  }
});

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} />
  }
);

...

从“React”导入React；
从“react native”导入{View，StyleSheet}；
从“反应导航”导入{DrawerItems}；
导出常量CustomDrawerNavigator=（道具）=>(
);
const styles=StyleSheet.create({
容器：{
弹性：1
},
图标：{
宽度：30
}
});

Navigation.js:

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

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

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
  }
});

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} />
  }
);

...

从“./组件”导入CustomDrawerNavigator；
...
const main navigator=createDrawerNavigator(
{
主要内容：{
导航选项：{
抽屉图标：（{tintColor}）=>(
),
抽屉标签：“主”
},
屏幕：主屏幕
},
登录：{
导航选项：{
抽屉图标：（{tintColor}）=>(
),
抽屉标签：“登录”
},
屏幕：登录屏幕
},
简介：{
导航选项：{
抽屉图标：（{tintColor}）=>(
),
抽屉标签：“配置文件”
},
屏幕：ProfileScreen
}
},
{
contentComponent:props=>
}
);
...

有人能帮我显示来自不同文件的ContentCompent吗

import CustomDrawerNavigator from "../component";

上面这一行要求您的组件有一个

默认导出

。。。但什么也没找到

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

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

---

我认为这是因为contentComponent需要一个类组件，而不是使用react导航，而是使用react导航抽屉来导入CreateDrainerNavigation或DrainerNavigationItems（使用它而不是DrainerItems）

---

从“反应导航抽屉”导入{createDrawerNavigator，DrawerNavigationItems}这解决了我的问题。我知道它很小，但我现在看不见它。非常感谢！很高兴它有帮助。。。快乐编码！thnks帮了我很多忙，告诉我你在contentComponent中能得到道具吗。？我的建议中没有提到这一点。