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：   急件中不存在模块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-*。       在ModuleResolver.resolveDependency（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ node-haste \ DependencyGraph \ ModuleResolution.js：183：15）       在ResolutionRequest.resolveDependency（C：\ Users \ Zarzu Victor \ AwesomeProject \ 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）       在Object.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）       在Array.map（）       在resolveDependencies（C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：388：18）       在C：\ Users \ Zarzu Victor \ AwesomeProject \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：261：33       在Generator.next（）       在asyncGeneratorStep（C：\ Users \ Zarzu Victor \ 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-handlernpm。他们创建了单独的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-handle r npm

react-native链接react-native-gesture-handler

并将此代码添加到您的MainActivity中，以创建流畅的导航抽屉

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

OR

请检查example project here

从反应导航导入，我对此有误

2 个答案: