从react-navigation导入，我有一个错误

Question

我安装了react-native最新版本，我做了一个0.58.0项目。我用'npm install --save react-navigation'安装了react-navigation，我有一个错误

这是错误

加载依赖图，完成。错误：捆绑失败：错误：无法从react-native-gesture-handler解析模块

C:\Users\Zarzu
  Victor\AwesomeProject\node_modules\@react-navigation\native\src\Scrollables.js

：Haste模块映射中不存在模块react-native-gesture-handler

这可能与https://github.com/facebook/react-native/issues/4968有关要解决，请尝试以下方法：1。清除守望者手表：watchman watch-del-all。 2.删除node_modules文件夹：rm -rf node_modules && npm install。 3.重置Metro Bundler缓存：rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache。 4.删除急速缓存：rm -rf /tmp/haste-map-react-native-packager-*。在ResolutionRequest.resolveDependency（C：\ Users \ Zarzu Victor \ AwesomeProject）的ModuleResolver.resolveDependency（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ node-haste \ DependencyGraph \ ModuleResolution.js：183：15） node_modules \ metro \ src \ node-haste \ DependencyGraph \ ResolutionRequest.js：52：18）在DependencyGraph.resolveDependency（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ node-haste \ DependencyGraph.js：273） ：16）在dependency.resolve（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ lib \ transformHelpers.js：261：42）的dependencies.map.result（C：\ Users \ Zarzu Victor \ AwesomeProject） \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：391：31）在resolveDependencies的Array.map（）处（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：388： 18）at：Geneyncnete（C： ctor \ AwesomeProject \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：87：24）DELTA [android，dev] ...... / index.js▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ▓░98.6％（591/666），失败。

:: ffff：127.0.0.1 - - [02 / Apr / 2019：18：13：46 +0000]“GET /index.delta?platform=android&dev=true&minify=false HTTP / 1.1”500 - “ - ”“okhttp / 3.12.1"

'''
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

export default createAppContainer(TabNavigator);
'''

Answer 1

您需要单独安装react-native-gesture-handler npm。他们创建了分离的npm包，用于触摸和手势处理和识别。

步骤1。

npm i react-native-gesture-handler

第2步。

react-native link react-native-gesture-handler

第3步。（可选）

如果步骤2无法正常工作，则代码配置不正确，因此我们使用步骤3手动配置代码

要完成针对Android的react-native-gesture-handler的安装，请务必对MainActivity.java进行必要的修改：

import com.facebook.react.ReactActivity; 
+ import com.facebook.react.ReactActivityDelegate; 
+ import com.facebook.react.ReactRootView; + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; 
public class MainActivity extends ReactActivity { 
@Override 
protected String getMainComponentName() { return "Example"; } + 
@Override 
+ protected ReactActivityDelegate createReactActivityDelegate() { 
+ return new ReactActivityDelegate(this, getMainComponentName()) { 
+ @Override + protected ReactRootView createRootView() { 
+ return new RNGestureHandlerEnabledRootView(MainActivity.this); 
+ } 
+ }; 
+ } }

iOS无需其他步骤。

有关更多信息，请参阅以下文档： -

https://reactnavigation.org/docs/en/getting-started.html#installation

https://www.npmjs.com/package/react-native-gesture-handler/v/1.0.0-alpha.34?activeTab=readme

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Answer 2

请安装react-native-gesture-handler npm

react-native link react-native-gesture-handler

并将此代码添加到MainActivity中以创建平滑的导航抽屉

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
    };
}

要么

请检查example project here