时间戳

首页 > 解决方案 > React Native：解决“react-native-gesture-handler”

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

问题描述

我尝试按照其文档安装反应导航：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.jsfile 的文件，其中：

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"

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

标签： javascriptiosreactjsreact-native

解决方案

根据您提到的文档，

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

如果您正在使用npm project. 您提到的代码与exponot with npm。我认为这将解决您的问题。此外，我想再提一件事npm install @react-navigation/native --save，我曾经在最后运行这样的代码--save，但如果您不添加--save，仍然不会出现任何问题。而且我也这样使用-

  1. npm install react-native-gesture-handler

  2. npm install react-native-reanimated

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

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

推荐阅读