React native 实战 --导航篇 React Navigation(mac)

官方文档地址

React native 导航使用

  • 安装:yarn add react-navigation

StackNavigator 的使用

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs 导航的路径,名称等

const App = StackNavigator({ Main: {screen: MainScreen}, });

StackNavigatorConfig 导航的配置项

  • ****一大堆(建议看官方文档)
  • navigationOptions 一些配置选项(如果在初始化的时候使用,会覆盖你在组件里面单独的设置)
    • title 标题名称
    • header 可以单独设置 returns a React Element
    • headerTitle 标题名称
    • headerTitleAllowFontScaling 标题字体是否可以缩放,默认为 true
    • headerBackTitle 返回按钮旁边的文字
    • headerTruncatedBackTitle
    • headerRight header右边的一个 Element
    • headerLeft header左边的一个 Element
    • headerStyle header的style 比如 headerStyle: { backgroundColor:'#fff' }
    • headerTitleStyle 标题的 style
    • headerBackTitleStyle 返回标题文字,注意是文字的style
    • headerTintColor header图标的颜色
    • headerPressColorAndroid Android>5.0 点击时波纹的颜色
    • gesturesEnabled 是否可以用手势打开这个屏幕 IOS (true) Android (flase)
    • gestureResponseDistance 从屏幕边缘覆盖的触摸距离 horizontal (默认 25) vertical (默认135)

还有tab导航跟抽屉导航,建议看文档

导航的一些事件

  • navigate - 简单理解就是跳转到另外一个导航页面
  • state - 导航的state
  • setParams - 传递参数
  • goBack - 关闭当前页面,导航回退
  • dispatch - 发起一个 dispatch

导航的一些 action

  • Navigation Actions
    Navigate - 导航到另外一个
    Reset - 把state状态替换(可以理解为重置router)
    Back - 回退
    Set Params - 参数
    Init - 设置初始化(除非你没设置,或者undefined的时候)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容