当前位置: 首页 > 软件库 > 程序开发 > >

react-native-navigator-router

整合 ReactNative 和 ReactRouter 组件
授权协议 MIT
开发语言 Java Objective-C Python JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 燕璞
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

本项目用来整合ReactNative和ReactRouter两个组件。React Native中提供了页面栈管理和导航的组件Navigator,为页面的生命周期管理和页面导航跳转提供了动画容器的支持。React Router提供了为React项目的路由导航支持。通过使用React Native Navigator Router可以将两个组件整合起来,在React Native项目中实现根据URL进行界面导航跳转,并且拥有近乎原生效果的动画。

使用方式很简单:

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

需要跳转到新页面时,只需要使用React Router进行转跳即可:

this.context.router.push('/about')

目前该组件以及应用于生产环境的App中,并已经在市场上架。

  • navigator with redux react native for 在采用了redux的项目中实现navigator的跳转。采用 react-native-router-flux +redux explain 在Route标签中的component属性将redux加入组件中, 在Router标签中Connect a to redux triggeractions Actions.BEFOR

  • 项目集成Redux + React-Navigation开发 用过React开发过项目的可能对Redux都有一定的了解吧,他和Vue中的Vuex也是比较类似的,今天这里就说说如何在RN项目中将Redux和React-Navigation进行结合集成到项目中进行开发: 注意: 由于上次说过React-Navigation,这里就默认看这篇文展是已经了解了React-Navigation的 安装相应的

  • react-native-router-flux 是一个基于 react-navigation 路由框架,简化了RN页面跳转的步骤,并且一直随着 react-navigation 升级更新版本。使用react-native-router-flux 框架,可以将全部的页面跳转的处理逻辑都写在一个地方,方便了后续的维护,下面是react-native-router-flux的源码地址:react-na

 相关资料
  • 问题内容: 我正在开发React应用程序时探索React Native的 可能性,并借助component在视图之间进行自定义导航。 主应用程序类呈现导航器,并在内部返回传递的组件: 目前,该应用包含两个视图: 我想找出的是: 我在日志中看到,虽然视图正确呈现一次,但按“转到菜单”时会多次调用。动画是如何工作的? 通常,我的方法符合React方法,还是可以做得更好? 我要实现的功能类似于但没有导航

  • 问题内容: 使用 withRouter() 时如何获取路由上下文,位置,参数等? 您可以使用withRouter获得该信息,还是必须将这些内容显式传递到组件树中? 问题答案: 因此,不再使用。在道具中都可以使用: 因此,假设您想将用户转到新路线,您只需

  • 本文向大家介绍react-native组件中NavigatorIOS和ListView结合使用的方法,包括了react-native组件中NavigatorIOS和ListView结合使用的方法的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来

  • 我正在将react应用程序从webpack-dev-server过渡到nginx。 编辑: 我知道大多数设置都可以工作,因为当我在没有登录的情况下转到localhost:8080时,我也会得到登录页面。这不是通过重定向到localhost:8080/login,而是一些react代码。

  • 场景是:在移动端页面浏览到很下面,然后点击进入下一个页面,点返回的时候依然在刚才的位置而不是重新刷新页面

  • 问题内容: 我正在考虑将React Native用于新的Web应用程序。是否可以使用它同时发布iOS和Android应用程序? 我知道这是在路线图上,但是我不清楚这将是一个单独的开源项目(例如,React Android与React Native)还是一个(例如,React Native)。 问题答案: TLDR :很有可能。但这取决于您的用例。 您可以实现约 80〜99 +%的代码复用率 (取决