React Native:解析“react-native-gesture handler”

Question

我尝试按照its文档安装react导航：https://reactnavigation.org/

下面是我做的步骤：

运行"npm install --save @react-navigation/native"

运行"expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view"

运行"npm install --save @react-navigation/stack"

然后在我的导航文件夹中，我创建了一个名为MealsNavigator.js file的文件，在里面：

import { createStackNavigator } from '@react-navigation/stack';
import { createAppContainer } from '@react-navigation/native';
import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

const MealsNavigator = createStackNavigator({
    Categories: CategoriesScreen,
    CategoryMeals: {
        screen: CategoryMealsScreen
    },
    MealDetail: MealDetailScreen
});

export default createAppContainer(MealsNavigator);

然后我尝试在我的App.js文件中使用它，看看它是否工作：

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';

import MealsNavigator from './navigation/MealsNavigator';

const fetchFonts = () => {
  Font.loadAsync({
    'poppins-regular': require('./assets/fonts/Poppins-Regular.otf'),
    'poppins-bold': require('./assets/fonts/Poppins-Bold.otf')
  })
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  // This will make sure simply keep the flash screen open
  // until our fonts loaded
  if (!fontLoaded) {
    return (
    <AppLoading
      startAsync={fetchFonts}
      onFinish={() => setFontLoaded(true)}
    />
    );
  }

  return <MealsNavigator />;
}

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

但最终我得到了这个错误：

Unable to resolve "react-native-gesture-handler" from "node_modules/@react-navigation/stack/src/views/GestureHandler.native.tsx"

你知道怎么解决这个问题吗？

Answer 1

根据您提到的docs，

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

如果您正在使用npm project，这将是一个完美的解决方案。您提到的代码是用expo编写的，而不是用npm编写的。我想这会解决你的问题。此外，我想再提一件事，npm install @react-navigation/native --save，我曾经像这样运行代码--保存在最后，如果你不添加--保存仍然不会出现问题。我也是这样使用的-

1. npm install react-native-gesture-handler

1. npm install react-native-reanimated

.........................................

以此类推。意思是一个接一个地分开。如果你在npm之前在终端中使用Ubuntu20.04，那就使用sudo。谢谢。