React Native - 如何在页面之间导航 - 错误：未定义不是函数（近，'...（0，_reactNAvigation.StackNavigator）...'））

Question

我正在学习 React Native 并且我正在尝试实现页面导航，当我点击 Explore 按钮时，我想转到 About 页面。我遵循了一些指南，但到目前为止还没有。 我得到的错误是 undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*.

代码如下：

index.js

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createStackNavigator, StackNavigator } from "react-navigation";
import HomeScreen from './pages/home_screen.js';
import AboutPage from './pages/about_me.js';



// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
//   android:
//     'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });



const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    About: {
      screen: AboutPage,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

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

home_screen.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import LinearGradient  from 'react-native-linear-gradient';
import LocationIcon from 'react-native-vector-icons/Entypo';
import SocMediaIcons from 'react-native-vector-icons/AntDesign';
import { createStackNavigator, createAppContainer } from "react-navigation";




const locationIcon = (<LocationIcon name="location" size={30} color="#6600cc" />);
const linkedInIcon = (<SocMediaIcons name="linkedin-square" size={30} color="#6600cc" />);
const instagramIcon = (<SocMediaIcons name="instagram" size={30} color="#6600cc" />);
const facebookIcon = (<SocMediaIcons name="facebook-square" size={30} color="#6600cc" />);



// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
//   android:
//     'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });

class HomeScreen extends Component{
  render() {
    return (
      <LinearGradient
          colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
          style={styles.container}
        >
       <View style={styles.iconGrid}>
        <View style={{width: 195}}>
         <Text>{locationIcon} Mordor</Text>

        </View>
        <View style={{width: 70}} />
        <View style={{width: 30}} >
          {facebookIcon}
        </View>
        <View style={{width: 30 }} >
          {instagramIcon}
        </View>
        <View style={{width: 30}} >
          {linkedInIcon}
        </View>
      </View>

        <TouchableHighlight 
                style ={{
                    height: 50,
                    shadowColor: 'red',
                    width:260,
                    borderRadius:30,
                    backgroundColor : "rgba(255, 255, 255, 0.3)",
                    marginLeft :50,
                    marginRight:50,
                    marginTop : 250
                }}>
            <Button onPress={()=> this.props.navigation.navigate('About')}            
            title="Explore"
            accessibilityLabel="Explore Beautox"
            /> 
        </TouchableHighlight> 


      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },
  button : {
     borderColor: 'red',
     backgroundColor: 'rgba(255, 255, 255, 1.0)'
  },
  iconGrid: {
    flexDirection: 'row',
    marginTop: 350,
    width: 350,
    marginRight: 10
  }
});

export default HomeScreen;

about_me.js

import React, {Component} from 'react';
import LinearGradient  from 'react-native-linear-gradient';

    class AboutMe extends Component {
        render() {
         return(
           <View>
              <Text>Hello</Text>
              <Button
               title="Go back"
               onPress={() => this.props.navigation.goBack()}
                />
              </View>
            );
        }
    };

    export default AboutMe;

任何帮助将不胜感激。

Answer 1

这是一个极简的 2 页 v3 应用。以Expo Snack 形式查看所有代码。

class Home extends React.Component {
  static navigationOptions = {
    title: "Home",
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Home Page</Text>
        <Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
      </View>
    );
  }
}

class AboutMe extends React.Component {
  static navigationOptions = {
    title: "All Me",
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Home Page</Text>
        <Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
      </View>
    );
  }
}

const AppScreens = createStackNavigator({
  Home: Home,
  About: AboutMe,
})

const App = createAppContainer(AppScreens);

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

export default App;

Answer 2

我正在考虑您正在使用 react-navigation v3。而在documentation中，明确提到了

注意：在 v2 及更早版本中，React Navigation 中的容器由 create*Navigator 函数自动提供。从 v3 开始，您需要直接使用容器。在 v3 中，我们还将 createNavigationContainer 重命名为 createAppContainer。

所以你所要做的就是使用 appContainer。

示例：

import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;