React Native的Navigator详解

前言

之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中ios/android中都使用Navigator作为通用导航栏,不过在在后来的版本中,由于Navigator对ios系统兼容较差,所以使用导航往往使用NavigatorIOS组件。

Navigator和NavigatorIOS属性

Navigator

Navigator设置方法: 初始化路由(initialRoute), 配置场景动画(configureScene), 渲染场景(renderScene)。如常见的:

class SimpleView extends Component {
  render() {
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{component: FirstPage}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}/>
    );
  }
}

常用方法

  • getCurrentRoutes() 该进行返回存在的路由列表信息
  • jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面
  • jumpForward() 进行跳转到相当于当前页面的下一个页面
  • jumpTo(route) 根据传入的一个路由信息,跳转到一个指定的页面(该页面不会卸载删除)
  • push(route) 导航切换到一个新的页面中,新的页面进行压入栈。通过jumpForward()方法可以回退过去
  • pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面
  • replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
  • replaceAtIndex(route,index) 传入路由以及位置索引,使用该路由指定的页面跳转到指定位置的页面
  • replacePrevious(route) 传入路由,通过指定路由的页面替换掉前一个页面
  • resetTo(route) 进行导航到新的界面,并且重置整个路由栈
  • immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
  • popToRoute(route) 进行弹出相关页面,跳转到指定路由的页面,弹出来的页面会被卸载删除
  • popToTop() 进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除

Navigator.IOS

NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。

常用方法

  • push(route) :导航器跳转到一个新的路由。
  • pop() :回到上一页。
  • popN(n) :回到N页之前。当N=1的时候,效果和 pop() 一样。
  • replace(route) :替换当前页的路由,并立即加载新路由的视图。
  • replacePrevious(route) :替换上一页的路由/视图。
  • replacePreviousAndPop(route) :替换上一页的路由/视图并且立刻切换回上一页。
  • resetTo(route) :替换最顶级的路由并且回到它。
  • popToRoute(route): 一直回到某个指定的路由。
  • popToTop() :回到最顶层的路由。常用属性 barTintColor : 导航条的背景颜色 initalRoute : 在RN 中导航名为“路由”(学过网络的应该明白这个词的意思), 作用就是指路的,大家可以这么理解,这个属性是一个方法,用来初始化导航的。 itemWrapperStyle : 为每一项定制样式,例如设置每一个页面的背景颜色 navigationBarHidden : 为true , 隐藏导航栏。 shadowHidden : 是否隐藏阴影,true/false。 tintColor : 导航栏上按钮的颜色设置。 titleTextColor : 导航栏上字体的颜色 。 translucent : 导航栏是否是半透明的,true/false。 push(route) : 加载一个新的界面(视图或者路由)并且路由到该界面。 pop() : 返回到上一个页面。 popN(n) : 一次性返回N个界面,当n = 1 时,即相当于pop()方法的效果。 replace(route):替换当前的路由。 replacePrevious(route) : 替换前一个页面的视图并且回退过去。 resetTo(route) : 取代最顶层的路由并且回退过去。 popToTop() : 回到最上层视图。 完整代码实例:
class NavigatorDemo extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title:'movies',//这是navigationController的title。
          component:SearchScreen,//注释:这里是要写的是相当于iOS开发里navigationController的rootViewController页面。
        }}
      />

    );
  }
}

二级页面逻辑

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class SearchScreen extends Component{
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>131231232
        </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    top:64,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
module.exports = SearchScreen;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go channel 通信通道

go中最重要的一种通信通道就是channel 1.给一个 nil channel 发送数据,造成永远阻塞 2.从一个 nil channel 接收数据,造成...

3063
来自专栏编程微刊

微信小程序从零开始开发步骤(五)轮播图

3823
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

2878
来自专栏滕先生的博客

react-native 跨平台滤镜集成

4168
来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

3387
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1192
来自专栏听雨堂

图表的一些资源

Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。 ? Open...

2268
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中io...

20910
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37511
来自专栏谦谦君子修罗刀

RN项目第一节

一、项目说明 本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-na...

3536

扫码关注云+社区

领取腾讯云代金券