如何在纯react-native应用中配置react-native导航？

Question

我一直在尝试使用react导航/栈来设置react原生导航，但似乎遗漏了一些东西。下面是我的代码：

    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在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/ base view的库，如果你没有安装基础导航库和堆栈导航库所需的其他库，你可能会在其他库中得到相同的错误。

尝试按如下方式安装库：

如果你使用的是纱线

添加@react-native-community/masked-view的

• yarn

或

如果您使用的是npm

• npm安装@react-native-community/masked-view

如果你遇到类似这样的错误，也要安装其他的库。

Answer 2

请参阅文档。您缺少一些依赖项。

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