Я пытаюсь использовать один файл входа для android и iOS в приложении React Native.
Я последовал за несколькими учебниками и получил следующее:
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 defined in.
Если я удалю фигурные скобки из Main в инструкции import, это говорит: "... но получил: object", поэтому мне кажется, что это связано с моим экспортом/импортом, но ничего не работает. Любая помощь будет оценена по достоинству.
Вы экспортируете свой Main
компонент как:
export default class Main extends Component {
но импортировать как:
import {Main} from './index';
default export
должен быть импортирован как:
import Main from './index';
Если вы используете экспорт по умолчанию, вы должны импортировать как это. Если это не работает, в вашем коде должна быть другая проблема.
React Native пытается импортировать на платформе. Например, если у вас есть index.ios.js
и index.android.js
в той же папке, React Native будет index.ios.js
только если он index.ios.js
для ios. Возможно, что при импорте из ./index
, React Native index.ios.js
путь с index.ios.js
вместо index.js
потому что вы объединяете для ios.
Если вам интересно, вы можете попробовать console.log
содержимое импортированного модуля, например console.log(Main)
чтобы узнать, что на самом деле импортируется.