деструктуризация экспорта из index. js выдает ошибку - PullRequest
Новая
       45

деструктуризация экспорта из index. js выдает ошибку

0 голосов
/ 09 июля 2020

Я разделяю свои стилизованные компоненты на отдельные файлы и экспортирую их в index.js, из которого я экспортирую их в свое приложение.

Проблема

Получение ошибки: 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoginScreen`.

This error is located at:
    in RCTScrollContentView (at ScrollView.js:1063)
    in RCTScrollView (at ScrollView.js:1196)
    in ScrollView (at KeyboardAwareHOC.js:517)
    in KeyboardAwareScrollView (at LoginScreen.js:165)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at LoginScreen.js:164)
    in LoginScreen (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at CardContainer.tsx:199)
    in RCTView (at CardContainer.tsx:198)
    in RCTView (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:526)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:508)
    in PanGestureHandler (at GestureHandler.native.tsx:13)
    in PanGestureHandler (at Card.tsx:502)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:498)
    in RCTView (at Card.tsx:492)
    in Card (at CardContainer.tsx:164)
    in CardContainer (at CardStack.tsx:497)
    in RCTView (at Screens.tsx:70)
    in MaybeScreen (at CardStack.tsx:490)
    in RCTView (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:388)
    in CardStack (at StackView.tsx:433)
    in KeyboardManager (at StackView.tsx:431)
    in RNCSafeAreaView (at src/index.tsx:28)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:428)
    in RCTView (at StackView.tsx:427)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at App.js:40)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
    in ThemeProvider (at NavigationContainer.tsx:63)
    in ForwardRef(NavigationContainer) (at App.js:39)
    in App (at hashtagui/index.js:23)
    in Provider (at hashtagui/index.js:22)
    in HashtagMain (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

Код

src / styles / login. js

import styled from 'styled-components/native';

const LoginWrapper = styled.View`
  justify-content: center;
  align-items: center;
`;

const LoginTop = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`;
const LoginBottom = styled.View`
  flex: 1;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
`;

export { LoginWrapper, LoginTop, LoginBottom };

src / styles / index . js

export { default as LoginStyles } from './login';

src / screen / LoginScreen. js

import { LoginWrapper, LoginTop, LoginBottom } from '../styles';

return (
    <SafeAreaView keyboardShouldPersistTaps="handled">
      <KeyboardAwareScrollView
        extraHeight={200}
        contentContainerStyle={styles.loginContainer__keyboardScrollView}>
        <LoginWrapper>
          <LoginTop>
            <Logo width={200} height={250} />
          </LoginTop>
          <LoginBottom>
            <FormikForm navigation={navigation} dispatch={dispatch} />
          </LoginBottom>
        </LoginWrapper>
      </KeyboardAwareScrollView>
    </SafeAreaView>
  );

Что не так с моим экспортом?

Вот на что я ссылался:

Разделение стилизованных компонентов на несколько файлов, но экспорт их в один файл

Удобное руководство по экспорту и импорту модулей для JavaScript и TypeScript

1 Ответ

1 голос
/ 09 июля 2020

В src/styles/index.js содержимое будет: 

export { LoginWrapper, LoginTop, LoginBottom } from './login';

Если у вас есть другой файл в styles (пример: подписка. js), вам нужно сделать:

зарегистрироваться . js

...
export { SignUpWrapper, SignUpTop, SignUpBottom };

затем в index.js: 

export { LoginWrapper, LoginTop, LoginBottom } from './login';
export { SignUpWrapper, SignUpTop, SignUpBottom } from './signup';

И затем в `LoginScreen. js 'импортируйте то, что вы хотите использовать.

...