React Native导入React Navigation

Question

我按照安装React Navigation for Android的所有说明进行操作。

首先，“npm install --save react-navigation”，“npm install --save react-native-gesture-handler”。 “react-native link react-native-gesture-handler”最后，更新了我的MainActivity.java

这是我的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 {

/**
 * Returns the name of the main component registered from JavaScript.
 * This is used to schedule rendering of the component.
 */
@Override
protected String getMainComponentName() {
    return "InstagramClone";
}

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

这是我得到的错误：

• 出了什么问题：在创建目录'D：\ React Native Projects \ InstagramClone \ node_modules \ react-时，无法创建父目录'D：\ React Native Projects \ InstagramClone \ node_modules \ react-native-gesture-handler \ android \ build'原生手势处理程序\机器人\编译\中间体\检查舱单\调试”

Answer 1

如果你有一个link react-native-gesture-handler应该没有问题或你尝试react-native link它将链接所有包。或者，如果你仍然面临同样的问题，首先在你的模拟器上删除应用程序，然后再次使用React-native run-android

Answer 2

您需要单独安装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