ReactNative 之React Navigation

什么是react-navigation?

react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。虽然现在功能还不完善，但基本是可以在项目中推荐使用的。

安装react-navigation

将react-navigation,react-native-gesture-handler，react-native-reanimated和react-native-screens包安装在您的React Native项目中。

yarn add react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

接下来，我们需要链接这些库。步骤取决于您的React Native版本：

React Native 0.60 and higher

在较新版本的React Native上，链接是自动的。
要在iOS上完成链接，请确保已安装Cocoapods。然后运行：

cd ios
pod install
cd ..

要完成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'

Hello React Navigation

React Navigation的堆栈导航器为您的应用提供了一种在屏幕之间转换和管理导航历史记录的方式。如果您的应用仅使用一个堆栈导航器，那么它在概念上类似于Web浏览器处理导航状态的方式-您的应用在用户与之交互时从导航堆栈中推送和弹出项目，这导致用户看到不同的屏幕。它在Web浏览器和React Navigation中的工作方式之间的主要区别在于，React Navigation的堆栈导航器提供了在堆栈中的路线之间导航时在Android和iOS上期望的手势和动画。
使用之前安装react-navigation-stack

yarn add react-navigation-stack

1、创建一个堆栈导航器

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator(RouteConfigs, StackNavigatorConfig);

createStackNavigator是一个返回React组件的函数。它需要一个路由配置对象，以及一个可选的选项对象（我们现在在下面省略）。createAppContainer是一个函数，该函数返回一个React组件，以将创建的createStackNavigator组件作为参数，并可以直接从中导出App.js以用作我们应用程序的根组件。

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import WelcomePage from "../pages/WelcomePage";
import HomePage from "../pages/HomePage";
import DetailPage from "../pages/DetailPage";
const InitNavigator=createStackNavigator({
    WelcomePage:{
        screen:WelcomePage,
        navigationOptions:{
            header:null
        }
    }
})
const MainNavigator=createStackNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:{
            header:null
        }
    },
    DetailPage:{
        screen:DetailPage,
        navigationOptions:{
            header:null
        }
    }

})
const appNavigator=createSwitchNavigator({
    Init:InitNavigator,
    Main:MainNavigator
})
export default createAppContainer(appNavigator);

RouteConfigs

screen: ProfileScreen,
// When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
// Optional: When deep linking or using react-navigation in a web app, this path is used:
path: 'people/:name',
// The action and route params are extracted from the path.
// Optional: Override the `navigationOptions` for the screen
navigationOptions: ({ navigation }) => ({
  title: `${navigation.state.params.name}'s Profile'`,

StackNavigatorConfig

• initialRouteName-设置堆栈的默认屏幕。必须与路由配置中的键之一匹配。

• initialRouteParams -初始路线的参数

• initialRouteKey -初始路线的可选标识符

• navigationOptions -导航器本身的导航选项，用于配置父导航器

• defaultNavigationOptions -用于屏幕的默认导航选项

• paths -路由配置中设置的路径的替代的映射

• disableKeyboardHandling-如果为true，则导航到新屏幕时键盘不会自动关闭。默认为false。在Web平台中，这将被忽略。

视觉选项：

• mode -定义渲染和过渡的样式：
  • card-使用标准的iOS和Android屏幕过渡。这是默认值。
  • modal-使屏幕从底部滑入，这是常见的iOS模式。仅适用于iOS，不适用于Android。
• headerMode -指定标题应如何呈现：
  • float-渲染停留在顶部的单个标题，并在更改屏幕时进行动画处理。这是iOS上的常见模式。
  • screen-每个屏幕都有一个附加的标题，标题随屏幕一起淡入和淡出。这是Android上的常见模式。
  • none -没有标题将被呈现。
• headerBackTitleVisible-为后退按钮标题是否可见提供了一个合理的默认值，但是如果要覆盖它，则可以使用true或false在此选项中使用。
• headerTransitionPreset-指定headerMode: float启用后标题应如何从一个屏幕过渡到另一个屏幕。
  • fade-in-place-标头组件不移动就可以淡入淡出，类似于iOS的Twitter，Instagram和Facebook应用。这是默认值。
  • uikit -iOS的默认行为的近似值。
• headerLayoutPreset -指定如何布置标题组件。
  • left-将标题固定在左侧的后退按钮或其他左侧组件附近。这是Android上的默认设置。在iOS上使用时，标头标题会隐藏。左侧组件中的内容将在标题下方溢出，如果需要进行调整，可以使用headerLeftContainerStyle和headerTitleContainerStyle。此外，此对齐方式与不兼容headerTransitionPreset: 'uikit'。
  • center -标题居中，这是iOS上的默认标题。
• cardStyle -使用此道具可以覆盖或扩展堆栈中单个卡片的默认样式。
• cardShadowEnabled-使用此道具在过渡期间具有可见的阴影。默认为true
• cardOverlayEnabled-在过渡期间，使用此道具可以看到可见的堆叠卡覆盖物。默认为false。
• transitionConfig-函数，用于返回与默认屏幕过渡合并的对象（请查看类型定义中的TransitionConfig ）。提供的函数将传递以下参数：
  • transitionProps -新屏幕的过渡道具。
  • prevTransitionProps -旧屏幕的过渡道具。
  • isModal -布尔值，指定屏幕是否为模态。
• onTransitionStart -卡过渡动画即将开始时要调用的功能。
• onTransitionEnd -卡过渡动画完成后要调用的功能。
• transparentCard- 实验性 -保持堆叠中所有卡片可见并添加透明背景而不是白色背景的道具。这对于实现模态对话框之类的操作很有用，在该对话框中，前一个场景在当前场景下仍应可见。

navigationOptions 用于RouteConfigs的配置

• title
  可以用作的后备字符串headerTitle。此外，将用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的备用。
• header
  React Element或给定的函数HeaderProps返回一个React Element，以显示为标题。
• headerShown
  是显示还是隐藏屏幕标题。默认情况下显示标题，除非将headerMode其设置为none。设置为false隐藏标题。
• headerTitle
  标头使用的字符串，React Element或React Component。默认为scene title。当使用的成分，它接收allowFontScaling，style和children道具。标题字符串被传入children。
• headerTitleAllowFontScaling
  标头标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为true。
• headerBackAllowFontScaling
  后退按钮标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
• headerBackImage
  反应元素或组件以在标题的后退按钮中显示自定义图像。使用组件时tintColor，在渲染（title）时，它会收到许多道具。默认为带有react-navigation/views/assets/back-icon.png背面图像源的Image组件，它是平台的默认背面图标图像（iOS上为人字形，Android上为箭头）。