Блог

родное приложение с react-навигацией. У меня работает навигация, но когда я добавляю 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} />
  }
);

...
  

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

 import CustomDrawerNavigator from "../component";
  

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

Извлеките именованный экспорт с помощью этого:

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

Я думаю, это потому, что contentComponent ожидает компонент класса, вместо использования react-navigation используйте react-navigation-drawer для импорта createDrawerNavigaor и DrawerNavigatorItems (используйте это вместо DrawerItems)

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