【React Native】路由和导航

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

Stack

  • 路由导航
  • RN 中默认没有类似浏览器的 history 对象
  • 在 RN 中路由跳转之前,需要先将路由声明在 Stack 中
  • 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

你可能感兴趣的:(react,native,react.js,javascript)