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

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

当我在HOME屏幕上单击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;

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

1 个答案: