6-2路由导航配置

https://reactnavigation.org/docs/zh-Hans/getting-started.html
首先 安装两个插件

yarn add react-navigation-stack
yarn add react-navigation

这段代码覆盖App.js

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName:"Home"
  }
);
export default createAppContainer(AppNavigator);

然后再安装其他的插件 进行配置

yarn add react-native-reanimated react-native-gesture-handler react-native-screens

首先要进官网看 然后看自己的react-nactive是什么版本

为了完成 react-native-screens 在 Android 上的安装, 请在android/app/build.gradle 中 dependencies 选项中添加下面这两行:

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

为了完成 react-native-gesture-handler 在 Android 上的安装,请在 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中加入这行

import 'react-native-gesture-handler'

关掉模拟器 重新连接 重新启动