NavigationContainer中的反应性错误

Question

由于我是react-native的新手，我只是想在react-native中构建一个可以导航的简单应用。

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Login from './Login';
import createStackNavigator from '@react-navigation/stack/src/navigators/createStackNavigator';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={App}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

AppRegistry.registerComponent(appName, MyStack);

现在它给了我错误：

如果我将MyStack换行，则会给我另一个错误：

我的 package.json ：

  "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.2",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.0.6",
    "@react-navigation/stack": "^5.0.6",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-dynamic-vector-icons": "^0.2.1",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-improved-text-input": "^0.0.1",
    "react-native-login-screen": "^0.3.6",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.8",
    "react-native-spinkit": "^1.5.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0"
  },

在我的app/build.gradle中，我添加了这两个：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

也重新启动了缓存并使其无效。

Answer 1

错误是因为AppRegistry.registerComponent使用了一个返回组件的函数，但是您正在传递组件。

更改

AppRegistry.registerComponent(appName, MyStack);

到

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

您还从错误的位置导入createStackNavigator。您需要这样导入它：

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