Почему импорт компонентов из других файлов вызвал ошибку «Инвариантное нарушение: недопустимый тип элемента»? - PullRequest
Новая
       7

Почему импорт компонентов из других файлов вызвал ошибку «Инвариантное нарушение: недопустимый тип элемента»?

0 голосов
/ 15 мая 2018

Я довольно продвинут в языке iOS Swift, но очень новый в реагировать на нативный фреймворк или язык JavaScript. Я также часами пытался найти правильный учебник для стекового навигатора, но не могу его найти. В настоящее время я использую этот учебник , чтобы изучить основы навигации собственного стека и хочу разделить два экрана на их собственные файлы. По сути, я хочу имитировать Swift с его AppDelegate.swift и файлами View Controller. Но это выдает ошибку вроде этого:

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенные компоненты) или класс / функция (для составных компонентов) но получил: объект. Вы, вероятно, забыли экспортировать свой компонент из файл, в котором он определен, или вы могли перепутать имя и имя по умолчанию импорт.

Это была старая ошибка. Новая ошибка сейчас:

TypeError: undefined не является объектом (оценивается как this.props.navigation.navigate)

Эта ошибка находится по адресу:

в HomeScreen (на renderApplication.js: 33)

...

Вот мой текущий код. Это было отредактировано согласно решениям.

App.js: 

import React from 'react';
import { Button, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

export default HomeScreen;

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

AppRegistry.registerComponent("TestProject", () => App);

HomeScreen.js: 

import React from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

ProfileScreen.js: 

import React from 'react';
import { Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Jane Profile',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Text>Welcome to Jane profile!</Text>
    );
  }
}

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

В этом случае я пытаюсь создать домашний экран с кнопкой, которая ведет ко второму экрану (профилю) с текстом в нем. Я также знаю, что должен иметь возможность извлечь имя профиля из ProfileScreen, который отправил HomeScreen, но я прямо сейчас жестко запрограммировал его, чтобы мне было проще понять решение.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Попробуйте это 

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const App = StackNavigator({
  HomeScreen: { screen: HomeScreen },
  ProfileScreen: { screen: ProfileScreen },
}, {
  initialRouteName: 'HomeScreen',
  headerMode: 'none'
});

export default () => <App />;
  1. Название маршрута должно быть не обязательно, а обязательно рекомендуется.
  2. Экспорт элемента навигации.
  3. У меня даже нет сценария AppRegistry в моем проекте, но он все еще работает.

Если есть какие-либо проблемы, прокомментируйте это ниже! Надеюсь, что это решит проблему

Примечание: Это будет работать в версии с активной навигацией 1.5.11

Для реагировать-навигация v2 попробуйте этот код 

import React from 'react';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const App = createStackNavigator({
   HomeScreen: { screen: HomeScreen },
   ProfileScreen: { screen: ProfileScreen },
}, {
   initialRouteName: 'HomeScreen',
   headerMode: 'none'
});

export default () => <App />;

Сделайте файл сценария навигации глобальным, чтобы получить доступ к его реквизитам!

0 голосов
/ 15 мая 2018

В реакции-нативе мы не регистрируем каждый компонент, используя AppRegistry.registerComponent, а регистрируем родительский компонент, а родительский компонент отрисовывает дочерний компонент. Для внесения необходимых изменений необходимо зарегистрировать компонент App и экспортировать HomeScreen и ProfileScreen.

.

Sample

App.js 

...
const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});
AppRegistry.registerComponent('projectName', () => App)

HomeScreen.js 

...
class HomeScreen extends React.Component {
  ...
}
export default HomeScreen;

ProfileScreen.js 

...
class ProfileScreen extends React.Component {
  ...
}
export default ProfileScreen;

Надеюсь, это поможет!

...