React Native：解决“react-native-gesture-handler”答案

【问题标题】：React Native: resolve "react-native-gesture-handler"React Native：解决“react-native-gesture-handler”
【发布时间】：2020-07-16 02:14:14
【问题描述】：

我尝试按照其文档安装反应导航：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 的文件，并在里面：

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"

知道如何解决这个问题吗？

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案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 我曾经在最后运行这样的代码 --save 虽然如果你不添加 --save 仍然不会出现问题。而且我也这样用-

npm install react-native-gesture-handler
npm install react-native-reanimated

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

等等。一一分别的意思。如果您使用的是 Ubuntu 20.04，请在终端中 npm 之前使用 sudo。谢谢。

【讨论】：