最近新项目开发完成上架,顺手造了个新轮子,用来整合Navigator和ReactRouter两个组件。可以实现通过URL方式来管理和导航页面。
GitHub:https://github.com/starlight36/react-native-navigator-router
NPM:https://www.npmjs.com/package/react-native-navigator-router
使用方式很简单,只需要一点点配置:
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';
import { createNavigatorRouter } from 'react-native-navigator-router';
class App extends Component {
render() {
return (
<Router history={createMemoryHistory('/')}>
<Route path='/' component={createNavigatorRouter()}>
<IndexRoute component={Home} />
<Route path="/about" component={About} />
<Route path="/detail" component={Detail} />
</Route>
</Router>
);
}
}
AppRegistry.registerComponent('Example', () => App);
要调用一个页面,只需要:
this.context.router.push('/about');
目前可以支持push、back、go、replace操作,其他方式尚未测试。可以跟Redux整合起来使用。
欢迎使用并反馈问题。