React Native路由（React-Navigation 5.X）之StackNavigator配置选项篇【2】

配置选项

Stack.Navigator的配置选项

initialRouteName：首次加载名称
screenOptions：屏幕的默认选项。如下示例。

<Stack.Navigator
initialRouteName="Page1"     //作为初始化页面、不写的话默认第一个screen为初始化页面
screenOptions={{                 //用来定制头部信息、根据自己需要更改
  title: '测试标题',
  headerStyle: {
    backgroundColor: '#ee7530'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize: 20
  }
}}>

keyboardHandlingEnabled

如果为false，则导航到新屏幕时，屏幕键盘不会自动关闭。默认为true
mode：定义渲染和过渡的样式

card：使用标准的iOS和Android屏幕过渡。这是默认值.

modal：这有两件事：设置headerMode到screen堆栈，除非指定使屏幕从iOS底部的底部滑入，这是一种常见的iOS模式.
headerMode:指定标题的呈现方式

float：渲染停留在顶部的单个标题，并在更改屏幕时进行动画处理。iOS上的常见模式。

screen：每个屏幕都有一个附加的标题，标题随屏幕一起淡入和淡出。Android上的常见模式。

none ：没有标题。

Stack.Screen的配置选项
- options：可用于配置导航器内的各个屏幕
  1. title：头部标题
```
function StackScreen() {
    return (
    //  静态值
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomePage}
        options={{ title: 'My home' }}
      />
      // 动态获取
      <Stack.Screen
        name="Profile"
        component={HomePage}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}
/* 在组件中修改使用setOptions */
    <Button
        title="Update the title"
    	onPress={() => navigation.setOptions({ title: 'Updated!' })}
    />
```
  1. header：函数，返回一个React Element，显示为标题。如下示例。
```
    header: ({ scene, previous, navigation }) => {
    const { options } = scene.descriptor;
	  const title =
	    options.headerTitle !== undefined
	      ? options.headerTitle
	      : options.title !== undefined
	      ? options.title
	      : scene.route.name;
	
	  return (
	    <MyHeader
	      title={title}
	      leftButton={
	        previous ? <MyBackButton onPress={navigation.goBack} /> : undefined
	      }
	      style={options.headerStyle}
	    />
	  );
    };
```
  1. headerShown：是显示还是隐藏屏幕标题。默认情况下显示标题，除非将headerMode其设置为none。设置为 false隐藏标题。在特定屏幕上隐藏标题时，您可能还需要将headerModeprop 设置为screen。
  2. headerTitle：字符串或返回标头要使用的React元素的函数。默认为 title 选项值.
```
function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}
```
  1. headerTitleAlign：对齐标题。可选择left或center。默认为iOS-center和Android-left
  2. headerTitleAllowFontScaling：标头标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
  3. headerBackAllowFontScaling：后退按钮标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
  4. headerBackImage：该函数返回一个React Element以在标题的后退按钮中显示自定义图像。使用函数时，它将tintColor在其参数对象中接收。默认为带有背面图像源的Image组件，它是平台的默认背面图标图像（iOS上为人字形，Android上为箭头）。
  5. headerBackTitle：iOS上的后退按钮使用的标题字符串。默认为上一个场景的headerTitle。
  6. headerBackTitleVisible：为后退按钮标题是否可见提供了一个合理的默认值，但是如果您想覆盖它，则可以使用true或false在此选项中使用
  7. headerTruncatedBackTitle：当headerBackTitle屏幕上不适合显示后退按钮时使用的标题字符串。"Back"默认情况下。
  8. headerRight：该函数返回一个React元素以显示在标题的右侧。
```
function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}
```
  1. headerLeft：返回React元素以显示在标题左侧的函数。使用函数时onPress，在呈现时它会接收许多参数（label，labelStyle和more-检查types.tsx以获取完整列表）。
  2. headerStyle：标头的样式对象。例如，您可以在此处指定自定义背景色。
  3. headerTitleStyle：标题组件的样式对象
  4. headerBackTitleStyle：标题的样式对象
  5. headerLeftContainerStyle：自定义headerLeft组件容器的样式，例如添加填充。
  6. headerRightContainerStyle：自定义headerRight组件容器的样式，例如添加填充。
  7. headerTitleContainerStyle：自定义headerTitle组件容器的样式，例如添加填充。默认情况下，headerTitleContainerStyle是具有绝对位置的风格和偏移量都left和right。这可能导致的空白或之间重叠headerLeft和headerTitle如果定制headerLeft被使用。可以通过在中和中进行调整left和right样式来解决。headerTitleContainerStylemarginHorizontalheaderTitleStyle
  8. headerTintColor：标头的色调颜色
  9. headerPressColorAndroid：材料波纹的颜色（仅适用于Android> = 5.0）
  10. headerTransparent：默认为false。如果为true，则标题将没有背景，除非您明确为其提供背景headerBackground。标头也将浮动在屏幕上，使其与下面的内容重叠。
  11. headerBackground：返回React元素以呈现为标题背景的函数。这对于使用背景（例如图像或渐变）很有用。
    
    例如，可以将其headerTransparent用于渲染模糊视图以创建半透明标题。参考下述示例.
```
import { BlurView } from 'expo-blur';
<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerTransparent: true,
    headerBackground: () => (
      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
    ),
  }}
/>;
```
  12. headerStatusBarHeight：在标题顶部添加额外的填充以说明半透明的状态栏。默认情况下，它使用设备安全区域插图中的最大值。传递0或自定义值以禁用默认行为，并自定义高度。
  13. cardShadowEnabled：使用此道具在过渡期间具有可见的阴影。默认为true。
  14. cardOverlayEnabled：使用此道具可以在过渡期间在卡下看到半透明的深色覆盖层。默认为trueAndroid和falseiOS。
  15. cardStyle：堆栈中卡的样式对象。您可以在此处提供自定义背景色，以代替默认背景。您还可以指定{ backgroundColor: ‘transparent’ }使前一个屏幕在下面可见（对于透明模式）。这对于实现模态对话框之类的东西很有用。mode: 'modal’使用透明背景时，还应该在堆栈视图配置中指定，这样以前的屏幕就不会分离并且在下面保持可见。
  16. animationEnabled：屏幕上是否应启用过渡动画。如果将其设置为false，则按下或弹出时屏幕不会动画。默认为true。
  17. animationTypeForReplace：当此屏幕替换另一个屏幕时要使用的动画类型。它采用以下值：
    
    push -将使用推送新屏幕的动画
    
    pop -将使用弹出屏幕的动画
    
    默认为push。
    
    当pop被使用时，pop动画被施加到被替换的画面。
  18. gestureEnabled：是否可以使用手势关闭此屏幕。默认为trueiOS，falseAndroid。
  19. gestureResponseDistance：从屏幕边缘开始覆盖触摸距离的对象，以识别手势。该对象可以包含以下属性：
    
    horizontal- 数字 -水平方向的距离。默认为25。
    
    vertical- 数字 -垂直方向的距离。默认值为135。
  20. gestureVelocityImpact：决定手势速度相关性的数字。默认值为0.3。
  21. gestureDirection：手势的方向。与动画有关
  22. transitionSpec：屏幕过渡的配置对象。与动画有关.请点击此处查看
  23. cardStyleInterpolator：插卡各部分的插补样式。与动画有关请点击此处查看
  24. headerStyleInterpolator：标头各部分的内插样式。与动画有关请点击此处查看
  25. safeAreaInsets：屏幕的安全区域插图。这用于避免使用诸如缺口和状态栏之类的元素。默认情况下，将自动检测设备的安全区域插图。您可以使用此选项覆盖行为。接受包含以下可选属性的对象：
    
    top- 数字 -顶部插图的值，例如包含状态栏和槽口的区域。
    
    right- 数字 -左插图的值。
    
    bottom- 数字 -顶部插图的值，例如底部的区域导航栏。
    
    left- 数字 -右插图的值。
动画部分请点击此处查看