Question

我正在尝试在React Native应用程序中为Android和iOS使用单个条目文件。

我已经按照一些教程进行了操作，结果如下：

index.js

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Main extends Component {
   render() {
      return (
        <Text>Hello world! from both IOS and Android</Text>
      );
   }
}

index.ios.js

import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';


AppRegistry.registerComponent('Main', () => Main);

我最终得到以下错误：

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.

如果我在导入语句中从Main中删除花括号，它会说＆＃39; ...但是得到了：object＆＃39;所以我觉得这与我的导出/导入有关，但似乎没有任何效果。任何帮助将不胜感激。

Answer 1

您要将Main组件导出为：

export default class Main extends Component {

但导入为：

import {Main} from './index';

default export应导入为：

import Main from './index';

如果使用默认导出，则必须像这样导入。如果这不起作用，则代码中必定存在其他问题。

Answer 2

React Native尝试基于平台导入。例如，如果您在同一文件夹中有index.ios.js和index.android.js，则只有在捆绑ios时，React Native才会捆绑index.ios.js。当您从./index导入时，React Native可能会使用index.ios.js而不是index.js来循环路径，因为您正在捆绑ios。

如果您有足够的好奇心，可以尝试console.log导入模块的内容，例如console.log(Main)查看实际导入的内容。

使用单个条目文件来响应本机应用程序

2 个答案: