Skip to content

liuhong1happy/similar-react-native-router

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

similar-react-native-router

similar react-native-router

安装

npm install --save similar-react-native-router

用法

import {Router,Route,Link,RouteHistory} from 'similar-react-native-router';

var RouterApp = ()=>{
	return (<Router defaultRoute="/home/index" path="/" component={MainApp}>
					<Route component={HomeView} path="home">
							<Route component={HomeIndexView} path="index"></Route>
							<Route component={HomeListView} path="list/:subject"></Route>
							<Route component={HomeDetails} path="details/:id"></Route>
					</Route>
				</Router>)
}

API

  • Router 定义根路由,指定defaultRoute(默认路由)
    • path 路由名称,这里指定为"/" String
    • component 路由对应的组件 React.Component
    • defaultRoute 默认路由 String
  • Route 定义路由,可包含子路由,允许定义[:id]格式路由,默认允许传递[?id=xxx]方式
    • path 路由名称,这里指定为"/" String
    • component 路由对应的组件 React.Component
    • children 子路由 Array<Route> or <Route>
  • Link 简单路由链接
    • name 跳转到的路由名称 String
    • onPress 路由点击回调函数,内部已经实现路由跳转 Function
    • config 跳转动画方式 Navigator.SceneConfigs
  • RouteHistory 路由操纵,注意以下是属性或者方法,非props。
    • pushRoute 修改当前路由,不适合后退页面,适合平行页面之间跳跃 Function(name,index,config)
    • resetToRoute 重置route,适合首次初始化的时候,例如登录应用过后 Function(name,index,config)
    • popRoute 后退到上一级 Function
    • popToRoute 后退多级 Function(name)
    • curHash 当前路由 String

特点

  1. similar-react-native-router采用ES6写法。

  2. 高度模仿react-router组件,采用Navigator实现,使用便捷。

联系方式

Email: liuhong1happy