react-navigation的使用

安装

npm install @react-navigation/native

给原生的React Native项目安装依赖

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

从React Native 0.60及更高版本开始，链接是自动的。因此，您无需运行 react-native link。

为了在iOS上完成自动链接，请确保您已经安装了Cocoapods，然后运行：

cd ios
pod install
cd ..

要完成react-native-screensAndroid的安装，请将以下两行添加到中的dependencies部分android/app/build.gradle：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

要完成react-native-gesture-handlerAndroid的安装，请对进行以下修改/***/exerland_app/android/app/src/main/java/com/exerland_app/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);
+      }
+    };
+  }
}

然后在您的条目文件的顶部添加以下内容（确保它位于顶部，并且没有其他内容），例如index.js或App.js：

import 'react-native-gesture-handler';

现在，我们需要将整个应用程序包装在中NavigationContainer。通常，您可以在条目文件中执行此操作，例如index.js或App.js：

import 'react-native-gesture-handler';
import React, {Component} from 'react';
import {Provider} from '@ant-design/react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from './app/pages/home';
import theme from './app/style/theme';
const Stack = createStackNavigator();
export default class App extends Component {
  render() {
    return (
      <Provider theme={theme}>
        <NavigationContainer>
          <Stack.Navigator mode="modal">
            <Stack.Screen
              name="Home"
              options={{title: 'Overview', headerShown: false}}
              component={Home}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    );
  }
}