从 index.js 解构导出会引发错误

Question

我将我的样式化组件拆分为单独的文件并将它们导出到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/screens/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>
  );

我的导出有什么问题？

这是我引用的：

Splitting Styled-Components into multiple files but export them as one file

A Handy Guide to Export and Import Modules for JavaScript and TypeScript

Answer 1

src/styles/index.js 中的内容将是：

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

如果您在styles 中有另一个文件（例如：signup.js），您需要这样做：

signup.js

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

然后在index.js:

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

然后，在 `LoginScreen.js' 中导入您要使用的内容。