【React Native】路由和导航

• RN 中的路由是通过 React Navigation 组件来完成的

Stack

• 路由导航
• RN 中默认没有类似浏览器的 history 对象
• 在 RN 中路由跳转之前，需要先将路由声明在 Stack 中
• <Stack.Navigator initialRouteName='Details'> <Stack.Screen name='Details' /> </Stack.Navigator>
• navigation.navigate('Details')
• Stack.Navigator 作用于整个导航（包含多个屏幕）
  • initialRouteName 初始化路由，即默认加载的路由
  • headerMode 声明屏幕头部信息
  • screenOptions
• Stack.Screen 仅仅作用于当前屏幕
  • options

ButtomTab

• 底部选项卡导航
• 支持设置导航icon图标

Drawer

• 抽屉式路由导航
• 支持设置导航icon图标

MaterialTopTab

• 支持手动滑动效果的选项卡导航

路由导航嵌套

• 在一个导航的内部，渲染另一个导航

路由传参

• 传递参数：navigation.navigate('路由名称', { KEY: 123 })
• 接收参数
  • 类组件：this.props.route.params.KEY
  • 函数组件：route.params.KEY