Question

我一直在尝试使用 react-navigation/stack 使用 react native 设置我的导航，但似乎遗漏了一些东西。这是我的代码：

    import "react-native-gesture-handler";
import * as React from "react";
import { Button, View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

const Stack = createStackNavigator();

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

当我尝试使用 yarm web 在网络上运行应用程序时该应用程序运行完美，但当我使用我的 android AVD 甚至我的真实设备时，它给了我这个错误：

Failed building JavaScript bundle.
Unable to resolve "@react-native-community/masked-view" from "node_modules\@react-navigation\stack\src\views\MaskedViewNative.tsx"

请帮忙

Answer 1

在这里，您必须安装 react-native-community/masked-view 库，如果您没有安装基础导航和堆栈导航库所需的其他库，则其他库可能会出现相同的错误。

>

尝试使用如下安装库：

如果你使用纱线

纱线添加@react-native-community/masked-view

或

如果你使用的是 npm

npm install @react-native-community/masked-view

如果您遇到此类错误，请安装其他库。

Answer 2

查看文档。您缺少一些依赖项。

installing-dependencies-into-a-bare-react-native-project

我如何在裸反应原生应用程序中配置反应原生导航？

2 个答案: