在未识别的本机反应中导入 ES 模块

Question

我想将屏幕导入到我的 React 导航中，但是当我导入时 class React.Component 它无法识别

我的routes.js

import * as Screens from '../screens/index';
import {FontIcons} from '../assets/icons';

export const MainRoutes = [
  {
    id: 'LoginMenu',
    title: 'Marketing',
    icon: FontIcons.login,
    screen: Screens.GridV1,
    children: [
      {
        id: 'Login1',
        title: 'Login V1',
        screen: Screens.GridV1,
        children: []
      },
      {
        id: 'Login2',
        title: 'Login V2',
        screen: 'GridV2',
        children: []
      },
      {
        id: 'SignUp',
        title: 'Sign Up',
        screen: 'GridV2',
        children: []
      },
      {
        id: 'password',
        title: 'Password Recovery',
        screen: 'GridV2',
        children: []
      },
    ]
  }
];

我的screens/index.js

export * from './navigation';
export * from './dash';

当我使用

检查屏幕导入时

console.log(Screens);

一切都很好。但是当我执行

console.log(Screens.GridV1);

我无法连接到 GridV1 class

请帮我解决这里的问题。谢谢

Answer 1

从你Screens的chrome快照可以看出，那一刻你console.log，Screens对象只包含一个元素{__esModule: true}。 GridV1、GridV2 和所有其他模块延迟解决。

因此您应该看到它与 setTimeout 一起工作，例如：

setTimeout( () => console.log(Screens.GridV1), 100 );

但真正的问题还在后面。通常 import javascript 模块不会有这样的副作用，它应该如你所料的那样工作。检查那些模块是否有特殊的初始化机制。

在未识别的本机反应中导入 ES 模块

Import ES Module in react native unidentified

javascript

android

ecmascript-6

react-native

react-navigation