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

Question

I tried to install react navigation following the its docs: https://reactnavigation.org/

Here are the steps I made:

run "npm install --save @react-navigation/native"

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

run "npm install --save @react-navigation/stack"

And then inside my navigation folder, I created a file called MealsNavigator.js file and inside:

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);

I then tried to use this inside my App.js file to see if its working:

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',
  },
});

But in the end I ended up getting this error:

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

Any idea how to fix this?

Answer 1

According to the docs which you have mentioned,

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

This will be the perfect solution for you if you are using npm project . The code you have mentioned is with expo not with npm . I think this will solve your issue. Moreover I would like to mention one more thing npm install @react-navigation/native --save I used to run code like this --save at the end though if you don't add --save still no issue will occur. And I also use like this -

1. npm install react-native-gesture-handler

2. npm install react-native-reanimated

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

And So on. Mean separately one by one. And If you are using Ubuntu 20.04 the in the terminal before npm use sudo . Thank you.