React Native - как перемещаться между страницами - Ошибка: undefined не является функцией (рядом, '... (0, _reactNAvigation.StackNavigator) ...'))

Question

Я изучаю React Native и пытаюсь реализовать навигацию по страницам. Когда я нажимаю кнопку Explore , я хочу перейти на страницу About. Я следовал нескольким гидам, но пока ничего. Я получаю ошибку: undefined не является функцией (рядом с '... (0, ReactionNavigation.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

Я думаю, что вы используете реагирующую навигацию v3.В документации четко указано, что

Примечание. В версии v2 и более ранних версиях контейнеры в React Navigation автоматически предоставляются функциями create * Navigator.Начиная с версии 3, вы должны использовать контейнер напрямую.В версии 3 мы также переименовали createNavigationContainer в createAppContainer.

Так что все, что вам нужно сделать, это использовать appContainer.

Пример:

import { createAppContainer } from 'react-navigation';


const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;