Проблема с навигацией в React Native - Правильная организация

Question

Я пытаюсь начать играть с React Native сейчас.И я из области веб-разработки.

С самого начала я пытаюсь организовать структуру папок так, чтобы мне было легче понять и внести изменения позже.

Прямо сейчас структура папоквыглядит следующим образом:

/screens
  HomeScreen.js
  ProfileScreen.js
/navigation
  MainNavigation.js
App.js
... etc

Я использую Expo CLI, так как я впервые работаю над React Native.

/ navigation / MainNavigation.js

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';



const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

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

/ экранов / HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';

export default function HomeScreen() {

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.blue_btn} onPress={() => this.props.navigation.navigate('Profile')}>
        <Text style={styles.white_text}>Profile</Text>
      </TouchableOpacity>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );

}

HomeScreen.navigationOptions = {
  header: null,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  blue_btn: {
    backgroundColor: '#13baa8',    
    padding: 10, 
  },
  white_text: {
    color: 'white',
  }
});  

/ экранов / ProfileScreen.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );

}


ProfileScreen.navigationOptions = {
  title: 'Profile',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

App.js

import React from 'react';
import Navigation from './navigation/MainNavigation';

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

Когда я нажимаю кнопку Profile на экране HOME, отображается следующее сообщение:

undefined is not an object(evaluating '_this.props.navigation')

Спасибо

Answer 1

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: { 
        screen: ScreenOne,
    },
    ScreenTwo: { 
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;