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

Question

I am learning React Native and I am trying to implement page navigation, when I click the Explore button , I want to go to the About page. I followed a few guides but nothing so far. The error I get is undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')* .

Here is the code:

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;

Any help would be appreciated.

Answer 1

Here's a minimalist 2 page v3 app. Check it out as an Expo Snack for all the code.

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

I'm considering you're using react-navigation v3. And in the documentation , it is clearly mentioned that

Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.

So all you have to do is use the appContainer.

Example:

import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;