react-native-route是react-native环境下的一个路由控制器,在开发模式下,默认页面会是一个list页面,展示路由中定义的所有页面,以方便调试进入任意页面。
而在release模式则根据路由设置,展示根路由页面或者手动设置的default路由页面。
$ npm install react-native-route --save
###用法
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Router, Route } from 'react-native-route';
export default class app extends Component {
render() {
return (
<Router>
<Route path='home' component={HomeComponent}>
<Route path='page1' component={PageComponent} />
</Route>
<Route path='mine' component={MineComponent} animation='FloatFromBottom'></Route>
</Router>
);
}
}
AppRegistry.registerComponent('app', () => app);
- default (bool): 当default设置为true时,当前页面将成为路由的根页面,默认为Router中的第一个页面。
- path (string): 某个页面的路径。
- component (object): 需要展示的页面组件。
- animation (object): 当前页面出现的动画。默认值FloatFromRight。可选值:PushFromRight, FloatFromRight, FloatFromLeft, FloatFromBottom, HorizontalSwipeJump, HorizontalSwipeJumpFromRight, VerticalUpSwipeJump, VerticalDownSwipeJump。
在Route对应的component中,可通过this.props.push
, this.props.pop
以及this.props.popToTop
来控制路由跳转。
其中this.props.push(path, params, animation)
可接收三个参数:
- path (string): 必填参数,需要跳转的目标页面的path,及上面定义的path。
- params (object): 选填参数,需要传给目标页面的数据,在目标页面中可通过
this.props.params
获取。 - animation (string): 选填参数,跳转到目标页面时的动画,在push中强行指定动画时,此动画将会覆盖在Route中指定的动画效果。
##Example
run demo
cd example
npm install
npm start
打开ios目录下的xcode工程,点击run
使用Android studio打开Android目录,点击run
native-echarts is released under the MIT license.