资讯专栏INFORMATION COLUMN

使用 react-native-simple-router 组织你的React Native 页面

wawor4827 / 2584人阅读

摘要:是一款第三方导航组件。你可以通过它进行合理的视图组织。使用修改的你的如果是修改对应文件即可。请记住必须在顶级路由中使用,如果你的链接潜入在多个组件中,你必须确保它能够冒泡到它的父级。其他组件推荐本文同步自己的博客

React Native Simple Router是一款第三方导航组件。你可以通过它进行合理的视图组织。

项目地址

安装

进入你的项目目录,如过没有初始化项目可以react-native init your_project,然后在项目目录安装react-native-simple-router

 npm install react-native-simple-router --save
使用
import Router from "react-native-simple-router";

修改的你的index.ios.js,如果是Android修改对应文件即可。

import React, { StyleSheet } from "react-native";

// 初始化页面
class HelloPage extends React.Component {

  render() {
    return Hello world!;
  }

}

const styles = StyleSheet.create({
  header: {
    backgroundColor: "#5cafec",
  },
});

// 在这里定义你的路由
// - 其中name 将会成会顶部导航条的标题内容
// - `component`用于渲染页面的组件
const firstRoute = {
  name: "Welcome!",
  component: HelloPage,
};

class MyApp extends React.Component {

  render() {
    return (
      
    );
  }
}

AppRegistry.registerComponent("routerTest", () => MyApp);

接下来你可以加入更多页面,你可以通过this.props.toRoute()导航至另外一个组件

我们定义另外一个页面next.js,代码很简单:

"use strict";

var React = require("react-native");

var {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    Component
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
});

class Next extends Component {
    constructor(props){
        super(props);
    }
    
    render() {
        var me = this;
        return (
          
            
              Welcome to Next Page!
            
          
        );
  }
}


module.exports = Next;

index.ios.js中主要加入下面方法

import React, { StyleSheet, PropTypes } from "react-native";
var Next = require("./next");
const propTypes = {
  toRoute: PropTypes.func.isRequired,
};

class HelloPage extends React.Component {

  constructor(props) {
      super(props);

      this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    this.props.toRoute({
      name: "next screen",
      component: Next
    });
  }

  render() {
    return (
      
        
          Next page please!
        
      
    );
  }
}

HelloPage.propTypes = propTypes;

这个时候我们点击 next page 即可导航至next页面。请记住this.props.toRoute()必须在顶级路由中使用,如果你的链接潜入在多个组件中,你必须确保它能够冒泡到它的父级。

配置

可以配置下面的属性:

firstRoute(必须): 你导航的首页

headerStyle: 改变你导航条的背景样式

titleStyle:改变导航条里的文字样式

bgStyle: 改变所有路由的背景样式

borderBottomWidth: 底部导航条的宽度

backButtonComponent:默认导航条会呈现一个back 文本的返回按钮,当然你可以自定义设置的组件

customAction:

hideNavigationBar: 隐藏导航条

statusBarProps:默认获取状态栏的props,可以参考StatusBar Docs.
+

this.props.toRoute()需要传入一个对象作为参数设置 。

name:路由的名称,也会被用在导航条的文本显示

component(必须):需要渲染的组件

leftCorner: 从导航左边开始开始渲染

rightCorner:则是从右边渲染相关组件

titleComponent:指定一个组件用于替换标题,类似Ins的第一页

headerStyle: 指定新渲染组件的导航条样式,你可以指定一个背景色,然后路由转换是会平滑过渡

passProps:带入一组参数,通常是一个对象key-value给新的组件

titleProps:如果你设置了title为一个组件,这样你可以把titleProps的值传入进去。

sceneConfig:控制转场动画,常见的参数如下:

Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.PushFromRight
Navigator.SceneConfigs.VerticalDownSwipeJump
Navigator.SceneConfigs.VerticalUpSwipeJump

更多属性参考可以参阅这里

this.props.replaceRoute的参数设置和toRoute一致,但是二者的区别在于toRoute会加入到你的堆栈中,而replaceRoute它将会替换当前所在的路由。

如果你是在登录或者登出的功能,使用replaceRoute会好过直接再导航至该路由。

this.props.resetToRoutetoRoute()传入的参数一致,而它的差异在于,它会替换掉当前的路由并且清空导航。如果你登录成功或者注册成功后,你并不希望退后,使用resetToRoute则会非常有用。

案例 Twitter App

一个简单的模仿twitter 的 应用,你可以直接使用它,并借鉴它的写法。

import React, { AppRegistry } from "react-native";
import TwitterApp from "./node_modules/react-native-simple-router/examples/twitter-example";

AppRegistry.registerComponent("routerTest", () => TwitterApp);
Explorer app

node_modules/react-native-simple-router/examples/Explorer里面还有一个Demo,安装依赖后便可以运行.

我们可以大致参考作者的目录架构

+ images/
+ style
    + css
    + icons
+ components
+ service
+ pages
+ ios
+ android
- index.ios.js 
- index.android.js
...
反馈

react-native-simple-router实际来源于react-native-router,但是作者不再更新,因此我们迁移过来,不过你依旧可以在原来issues找到你有可能遇到的问题的答案。

其他组件推荐

React-Native-Router

React-Native-Button

react-native-gifted-listview

react-native-scrollable-tab-view

本文同步自己的博客:http://www.jackpu.com/shi-yong-react-native-simple-router-zu-zhi-ni-de-react-native-ye-mian/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79003.html

相关文章

  • React Native 开发小Tips

    摘要:除此之外,部分页面,其实完全可以由网页去支持多端共用的功能,楼主亲身遇到过的场景,就是图表的绘制,我们的方案是一个页面,需要微信,手机网页,和都具备该功能,而且我们手机网页和客户端打开的稍微有区别,需要隐藏。 showImg(https://segmentfault.com/img/bVzxDW); 相信好多写React Native的都是前端出身,当然遇见问题的,也很多时候会想从前端...

    kevin 评论0 收藏0
  • 翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么?

    摘要:跟非常相似,但是在开始尝试你第一个之前,也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。 华翔,Web前端开发工程师著作权归作者所有,转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了,自从适配了An...

    darkerXi 评论0 收藏0
  • 来聊聊怎么写react-native上的样式吧

    摘要:我们来看看文档上是怎么说的吧在中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用来写样式。这些样式名基本上是遵循了上的的命名,只是按照的语法要求使用了驼峰命名法,例如将改为。 我遇到了什么问题? 不久之前我重构了一个古老的项目,总结了一些js方面的想法,不过对于一个前端项目而言不仅仅只由js组成的嘛,上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架、皮肤和肌肉。既然...

    Dionysus_go 评论0 收藏0

发表评论

0条评论

wawor4827

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<