如何在 react-native 中添加 react-navigation？

Question

我按照 docs.Installed 指定包中指定的每个步骤进行操作，并且在尝试运行 android 模拟器中的应用程序时，出现错误：

TypeError: (0, _stack.StackNavigator) is not a function. (In '(0, _stack.StackNavigator)()', '(0, _stack.StackNavigator)' is undefined

以下是我的App.js文件中的内容

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {StackNavigator} from '@react-navigation/stack';
import {View, Text} from 'react-native';
const Stack = StackNavigator();
function HomeScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
}
function DetailsScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Detail Screen</Text>
    </View>
  );
}
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default App;

以下是我的 package.json 文件中的依赖项

 "dependencies": {
        "@react-native-community/masked-view": "^0.1.7",
        "@react-navigation/core": "^5.3.2",
        "@react-navigation/native": "^5.1.4",
        "@react-navigation/stack": "^5.2.9",
        "react": "16.11.0",
        "react-native": "0.62.1",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-reanimated": "^1.7.1",
        "react-native-safe-area-context": "^0.7.3",
        "react-native-screens": "^2.4.0"
      }

如文档中所述，我尝试将以下代码放在 index.js 和 App.js

的顶部

import 'react-native-gesture-handler';

Answer 1

你导入了错误的函数import {StackNavigator} from '@react-navigation/stack';

应该是

import { createStackNavigator } from '@react-navigation/stack';

和

const Stack = createStackNavigator();

查看 get started 指南

如何在 react-native 中添加 react-navigation？

How to add react-navigation in react-native?

reactjs

react-native

react-native-android