如何在Android上设置React Native导航？

Question

我在安装WIX时对本机导航有一些问题， 我正在正确执行文档中的步骤，但是在运行应用程序和配置库时，以及在配置时，React native vector图标， 我已经“构建失败”。

> Configure project :react-native-vector-icons
The CompileOptions.bootClasspath property has been deprecated and is scheduled to be removed in Gradle 5.0. Please use the CompileOptions.bootstrapClasspath property instead.


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
> java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex Unable to merge dex

所以我不知道怎么了， 如果您有相同的问题并解决了，请帮助我

Answer 1

要在屏幕之间导航以及React Native应用程序的路由和导航，可以切换到React Navigation 3x https://reactnavigation.org/。它是功能强大且易于使用的导航解决方案，它完全以JavaScript编写（因此您可以阅读和理解所有源代码），并具有强大的本机基元。

如果您已经熟悉React Native，那么您将能够快速使用React Navigation！

在React Native项目中安装react-navigation软件包。

纱线添加反应导航

或使用npm

npm install-保存反应导航

接下来，安装react-native-gesture-handler。如果您使用的是Expo，则无需在此处执行任何操作，因为它已包含在SDK中。否则：

添加纱线react-native-gesture-handler

或使用npm

npm install --save react-native-gesture-handler

链接所有本机依赖项：

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

iOS不需要其他步骤。

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

package com.reactnavigation.example;

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

你很好！