React Native 中的导航问题 - 正确组织

Question

我现在正在尝试开始使用 React Native。 我来自网络开发领域。

从一开始，我就试图组织我的文件夹结构，以便我以后更容易理解和进行修改。

现在文件夹结构如下：

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

我正在使用 Expo CLI，因为这是我第一次使用 React Native。

/导航/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',
  }
});  

/screens/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',
  },
});

应用程序.js

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

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

当我单击主屏幕中的Profile按钮时，它显示以下消息：

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;