React-screen-navigation NPM

1.x 版本的请查看这里，由于当前版本 breaking change 和 1.x 不兼容。

基于React仿原生导航切换效果组件。

desc

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';

class App extends Component {
  goToDetailPage = () => {
    const { go } = this.props;
    go("detail", { id: 1, name: 'godotdotdot'})
  }
  goToWeeklyPage = () => {
    const { go } = this.props;
    go("weekly")
  }
  render() {
    return (
      <div className="App">
        <Screen path="detail" component={DetailPage} />
        <Screen path="weekly" component={WeeklyPage} />
        <h1>欢迎使用 ReactScreenNavigation</h1>
        <button onClick={this.goToDetailPage}>查看详情</button>
        <button onClick={this.goToWeeklyPage}>新建周报</button>
      </div>
    );
  }
}

export default withScreen(App);


ReactDOM.render(
  <ScreenProvider history={history}>
    <App />
  </ScreenProvider>,
  document.getElementById('root'),
);

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	可以手动调用该方法完成顶层节点的更新，从而完成导航页面的重新渲染