【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
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。