Передача реквизитов в ContentComponent в DrawerNavigator

Question

родное приложение с реагировать на навигацию. У меня работает навигация, но когда я добавляю contentComponent из файла CustomNavigationDrawer.js, я получаю сообщение об ошибке:

Если я вставлю код из 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} />
  }
);

...

Может ли кто-нибудь помочь мне отобразить содержимое компонента из другого файла?

Answer 1

import CustomDrawerNavigator from "../component";

В приведенной выше строке ожидается default export для вашего компонента ... но ничего не найдено

Получите именованный экспорт через это:

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