React Navigation Switch Navigator не работает после импорта класса из другого файла

Question

Привет, пожалуйста, посмотрите мой код здесь:

https://snack.expo.io/@ersimransingh/navigation-problem

Я создал свой навигатор для переключения между страницами из App.js в Second.js

Вкл.Страница App.js Я импортировал файловый модуль Second.js с именем App1, который работает с файлом.

Более того, я проделал то же самое с файлом Second.js, импортированным компонентом App из App.js, но при этом навигатор показывал ошибку нана странице написано

Компонент для маршрута 'App' должен быть компонентом React.

Я выполнил поиск в Интернете и попытался заменить синтаксис импорта из import {App} from './Приложение';чтобы импортировать приложение из './App';

Вы можете проверить мой код на выставке https://snack.expo.io/@ersimransingh/navigation-problem

Answer 1

У вас есть App.js, который создает маршрут с помощью Second.js, а Second.js создает маршрут с помощью App.js.Это определенно проблематично, потому что вы создаете конкретную ссылку.Скорее, вы должны создать навигацию в одном месте и использовать ее в App.js

. Вот пример: App.js

  export default class App extends React.Component{
      render(){
        return(
          <CreateTag />
        );
      }
    }

const AppContainer = createSwitchNavigator({
  FirstScreen,
  SecondScreen 
});

const CreateTag = createAppContainer(AppContainer);

FirstScreen.js

    export default class FirstScreen extends React.Component {
      render() {
        let { navigation } = this.props;

        return (
          <View>
            <Text
              style={styles.sampleText}
              onPress={() => navigation.navigate('SecondScreen')}>
              First screen
            </Text>
          </View>
        );
      }
    }

SecondScreen.js

export default class SecondScreen extends React.Component {
  render() {
    let { navigation } = this.props;

    return (
      <View>
        <Text
          style={styles.sampleText}
          onPress={() => navigation.navigate('FirstScreen')}>
          Second screen
        </Text> 
      </View>
    );
  }
}

Вот полный пример: https://snack.expo.io/S1cY9IVEV Также вы можете проверить из официального примера: https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/App.js

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