React-Screen-Navigation
1.x 版本的请查看这里,由于当前版本 breaking change 和 1.x 不兼容。
基于React仿原生导航切换效果组件。
Features
- 支持浏览器返回键,同时支持移动端物理返回键返回上一页
- 支持状态保存(通过分享链接后仍然能打开相应页面)
- 导航切换不影响其他dom结构,这在H5开发增强用户体验很重要
- react-router 式使用体验
Usage
import React Component from 'react';import ScreenProvider Screen withScreen from './lib/index'; import DetailPage from './detail';import WeeklyPage from './weekly'; import logo from './logo.svg';import './App.css'; { const go = thisprops; } { const go = thisprops; } { return <div ="App"> <Screen ="detail" = /> <Screen ="weekly" = /> <h1>欢迎使用 ReactScreenNavigation</h1> <button =>查看详情</button> <button =>新建周报</button> </div> ; } App; ReactDOM;
Demo
线上体验地址:https://godotdotdot.github.io/react-screen-navigation/
源码请前往 examples 目录
API
ScreenProvider
react-screen-navigation 顶层组件,类似于 react-router 中的 Router 组件。Screen 组件必须放在它的层级下面,层级深度不限。
参数 | 类型 | 备注 |
---|---|---|
history | object | history对象,同 react-router 中依赖的 history |
searchKey | string | 用于存储已激活的 Screen个数,该数值为位运算结果,将被存储于查询字符串中,体现在url上,该值为查询字符串键名。默认为 rsn |
container | string | 组件被追加到的 dom 组件id,默认为 screen |
Screen
对应到 react-router 的 Route 组件。表示新导航的页面。
参数 | 类型 | 备注 |
---|---|---|
path | string | 导航路径,用于唯一表示 |
component | React.Element | 导航页面组件 |
keepState | bool | 是否保存参数到查询字符串上,默认为 true |
clear | bool | 当导航页面出场时,是否清除该 dom,默认为 true |
wrapedClassName | string | 包裹 component 组件的外层容器的 className |
Screen 组件会暴露一些 api 给 component 组件。目前暴露的有
参数 | 类型 | 备注 |
---|---|---|
match | bool | 表示该 Screen 是否匹配 |
go | function | 导航到指定页面的唯一方法,请看下面 go 方法详细说明 |
back | function | 返回到上 n 层导航,请看下面 back 方法详细说明 |
params | object | 通过 go 方法第二个参数传递给导航页面的参数 |
history | object | ScreenProvider 接收的 history 对象 |
searchKey | string | 同 ScreenProvider 中的 searchKey |
activeScreens | number | 目前激活的导航的位操作值,值同为 searchKey 在查询字符串中的值 |
target | dom | 导航页面将被渲染到的 dom 节点 |
updateActiveScreen | function | 可以手动调用该方法完成顶层节点的更新,从而完成导航页面的重新渲染 |
withRouter
和 react-router 的 withRouter 类似,它是一个高阶组件,使用 withRouter 可以获得 Screen 下面暴露的一些方法,例如 go 和 back 方法。
go(path, params)
导航至目标导航页面
参数 | 类型 | 备注 |
---|---|---|
path | string | 同 Screen 中的 path,表示导航到指定 path 的组件页面 |
params | any | 用户传递给screen页面的参数 |
params
对象可以通过导航页面组件的props.params
对象获取。
back(n)
返回操作,该操作将用于导航出栈操作。指定 n 可以指定返回多少层级。注意该值为负数,默认为-1。
期望
后期准备加入自定义动画控制。