新轮子：整合Navigator和React Router使用URL导航页面

#1

最近新项目开发完成上架，顺手造了个新轮子，用来整合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整合起来使用。

欢迎使用并反馈问题。

#2

效果上图（GIF动图7.1M，手机慎点）

1 Like