feat(rn): react navigation packages upgrade

[SilentMelody]

这个 PR 做了什么? (简要描述所做更改)

react-navigation packages upgrade:
@react-navigation/bottom-tabs": "^5.8.0" -> "^6.2.0"
@react-navigation/native": "^5.7.3" -> "^6.0.8"
@react-navigation/stack": "^5.9.0" -> "^6.1.1"

这个 PR 是什么类型? (至少选择一个)

• 错误修复(Bugfix) issue id #
• 新功能(Feature)
• 代码重构(Refactor)
• TypeScript 类型定义修改(Typings)
• 文档修改(Docs)
• 代码风格更新(Code style update)
• 其他，请描述(Other, please describe): packages upgrade

这个 PR 涉及以下平台:

• 所有小程序
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 轻应用
• 京东小程序
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）

[taro-bot2]

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷

一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏

1. 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
2. 确保 CI 顺利运行。
3. 最好能提供对应的测试用例。

为了更好地进行沟通，请加入 Taro 开发者微信群：

[zhiqingchen]

参数

// app.config.json
const AppConfig = {
   rn: {
      tabOptions: {
         tabBarVisible: 'boolean',
         tabBarBadge: 'boolean',
         tabBarBadgeStyle: 'Record<string, any>',
      },
      tabBarOptions: {
         activeTintColor: 'string',
         inactiveTintColor: 'string',
         activeBackgroundColor: 'string',
         inactiveBackgroundColor: 'string',
         tabStyle: 'ViewStyle',
         labelStyle: 'TextStyle',
         showLabel: 'boolean',
         allowFontScaling: 'boolean',
         keyboardHidesTabBar: 'boolean',
         safeAreaInsets: 'Record<string, number>'
         style: 'ViewStyle'
      },
      screenOptions: {
         headerLeft: '(props: HeaderBackButtonProps) => React.ReactNode'
      },
      stackProps: {
         keyboardHandlingEnabled:'boolean',
         headerMode: 'StackHeaderMode';
         detachInactiveScreens:'boolean',
      },
      tabProps: {
         backBehavior: 'BackBehavior';
         lazy: 'boolean',
         detachInactiveScreens:'boolean',
         sceneContainerStyle: 'StyleProp<ViewStyle>'
      }
   }
}

// page.config.json
const AppConfig = {
   rn: {
      screenOptions: {
         headerLeft: '(props: HeaderBackButtonProps) => React.ReactNode'
      }
   }
}

router 结构释义

// createStackNavigate 无 tabbar
<NavigationContainer>
   <Stack.Navigator {...AppConfig.rn.stackProps} screenOptions={AppConfig.rn.screenOptions}>
      <Stack.Screen name="PageFoo" />
      <Stack.Screen name="PageBar" />
   </Stack.Navigator>
</NavigationContainer>

// createTabNavigate
<NavigationContainer>
   <Stack.Navigator {...AppConfig.rn.stackProps} screenOptions={AppConfig.rn.screenOptions}>
      <Stack.Screen name="tabNav" options={{headerShown: false}}>
         <Tab.Navigator {...AppConfig.rn.tabProps} screenOptions={AppConfig.rn.screenOptions} tabBar={(props)=> <CustomTabBar tabOptions={AppConfig.rn.tabOptions} {...AppConfig.rn.tabBarOptions} />}>
            <Tab.Screen name="tabPageBaz" />
            <Tab.Screen name="tabPageQux" />
         </Tab.Navigator>
      </Stack.Screen>
      <Stack.Screen name="PageFoo" />
      <Stack.Screen name="PageBar" />
   </Stack.Navigator>
</NavigationContainer>

[zhiqingchen]

breaking change

0. @react-native-community/masked-view 需要删除。
1. 需执行 yarn upgradePeerdeps
2. RN 0.60 0.61 0.62 不再支持