React Native Typescript 导航不起作用

Question

我正在使用 typescript 构建一个新的 React Native 博览会项目，并且我正在尝试通过 React Native 的 TS 文档设置导航，但当我运行我模拟它时没有任何显示。

我有以下超级简单的样板：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { RootStackParamList } from "./types";
import HomeScreen from "./screens/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";

const RootStack = createStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Home">
        <RootStack.Screen name="Home" component={HomeScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

这是我的 RootStackParamList：

export type RootStackParamList = {
  Home: undefined;
  ReactQuiz: undefined;
};

还有我的主页：

import { StyleSheet, Text, View } from "react-native";
import React from "react";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>HomeScreen</Text>
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

最后我的 package.json 我认为问题是：

{
  "name": "trivia",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "expo": "~49.0.7",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

编译器告诉我，它可能与安装多个导航依赖项有关，但这是直接来自文档的。我需要使用 navigationContainer（否则会出现错误）并且我需要 TS 的其他依赖项。

如果我做错了什么，一定有人会告诉我。

Answer 1

我认为您的代码没有任何问题，但可能是由热重载引起的即时问题。只需使用此代码并重新加载您的应用程序即可。它应该被修复，但如果没有，那么也许你可以通过输出指定问题。我们可以帮助您。