React Native 中的导航问题 - 正确组织 [英] Issue with Navigation in React Native - Organizing properly

问题描述

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

Am trying to start playing with React Native now. And I come from web development field.

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

Since start, am trying to organize my folder structure so that it would be easy for me to understand and make modifications later.

现在的文件夹结构如下:

Right now the folder structure is as follows:

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

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

Am using Expo CLI as this is my first time working on 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 />
    );
  }
}

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

App.js

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

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

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

When I click on the Profile button in the HOME Screen, it is showing this message:

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

谢谢

推荐答案

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;

这篇关于React Native 中的导航问题 - 正确组织的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！