Question

I try to use react-navigation in order to navigate through the screens at my project. However I faced an issue which is (0,_reactNavigation.StackNavigator) is not a function.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './src/components/Login/Login'
import Register from './src/components/Register/Register'

const App = StackNavigator({
  First:  {screen: Login},
  Second: {screen: Register}
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default App;

How can I solve this issue and run my project without any error?

Answer 1

将堆栈导航器更改为此功能： “ createStackNavigator” 然后，您可以像这样使用它（示例代码）

const RootStack = createStackNavigator(
  {
    Home: {
      index: 0,
      screen: HomeScreen,
    },
    Details : {
      index: 1,
      screen: DetailsScreen,
    }, 
  },
  {
    initialRouteName: "Home",
  }
);

Answer 2

由于您使用的是react-navigation 3.0，因此应执行以下操作：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Login from './src/components/Login/Login'
import Register from './src/components/Register/Register'

const App = createStackNavigator({
  First:  {screen: Login},
  Second: {screen: Register}
});

const AppContainer = createAppContainer(App)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default AppContainer;

Using StackNavigator to Navigate through screens

2 个答案: