react native 页面跳转
React Native目前有几个内置的导航器组件,一般来说我们首推Navigator
。它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作
场景简单来说其实就是一个全屏的React组件。与之相对的是单个的Text
、Image
又或者是你自定义的什么组件,仅仅占据页面中的一部分。
下面我们来定义一个仅显示一些文本的简单场景。创建一个名为“MyScene.js”的文件,然后粘贴如下代码:
import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class MyScene extends Component { static defaultProps = { title: 'MyScene' }; render() { return ( <View> <Text>Hi! My name is {this.props.title}.</Text> </View> ) } }
注意组件声明前面的export default
关键字。它的意思是导出(export)当前组件,以允许其他组件引入(import)和使用当前组件
// ./MyScene表示的是当前目录下的MyScene.js文件,也就是我们刚刚创建的文件
// 注意即便当前文件和MyScene.js在同一个目录中,"./"两个符号也是不能省略的!
// 但是.js后缀是可以省略的import MyScene from './MyScene'; class YoDawgApp extends Component { render() { return ( <MyScene /> ) } } AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);
场景已经说的够多了,下面我们开始尝试导航跳转。首先要做的是渲染一个Navigator
组件,然后通过此组件的renderScene
属性方法来渲染其他场景。
render() {return (<NavigatorinitialRoute={{ title: 'My Initial Scene', index: 0 }}renderScene={(route, navigator) => {return <MyScene title={route.title} />}}/>);
}
使用导航器经常会碰到“路由(route)”的概念。“路由”抽象自现实生活中的路牌,在RN中专指包含了场景信息的对象。renderScene
方法是完全根据路由提供的信息来渲染场景的。你可以在路由中任意自定义参数以区分标记不同的场景,我们在这里仅仅使用title
作为演示。
要过渡到新的场景,你需要了解push
和pop
方法。这两个方法由navigator
对象提供,而这个对象就是上面的renderScene
方法中传递的第二个参数。 我们使用这两个方法来把路由对象推入或弹出导航栈
import React, { Component } from 'react';
import { AppRegistry, Navigator, Text, View } from 'react-native'; import MyScene from './MyScene'; class SimpleNavigationApp extends Component { render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => <MyScene title={route.title} // Function to call when a new scene should be displayed onForward={ () => { const nextIndex = route.index + 1; navigator.push({ title: 'Scene ' + nextIndex, index: nextIndex, }); }} // Function to call to go back to the previous scene onBack={() => { if (route.index > 0) { navigator.pop(); } }} /> } /> ) } } AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);
对应的MyScene.js代码如下:
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native'; export default class MyScene extends Component { static propTypes = { title: PropTypes.string.isRequired, onForward: PropTypes.func.isRequired, onBack: PropTypes.func.isRequired, } render() { return ( <View> <Text>Current Scene: { this.props.title }</Text> <TouchableHighlight onPress={this.props.onForward}> <Text>点我进入下一场景</Text> </TouchableHighlight> <TouchableHighlight onPress={this.props.onBack}> <Text>点我返回上一场景</Text> </TouchableHighlight> </View> ) } }
转载于:https://www.cnblogs.com/dragonh/p/6221894.html
react native 页面跳转相关推荐
- 【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
- 《React Native 精解与实战》已发售,附 80 集配套免费视频教程
<React Native 精解与实战>是我撰写并由机械工业出版社出版的 React Native 实战书籍,书中讲解了 React Native 框架底层原理.React Native ...
- React Native入门 基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...
- React Native开发基础
在开始准备入手React Native时,先了解一下在RN中,页面怎么布局.如何写样式以及手势触摸事件. React Native 页面布局FlexBox FlexBox布局也就是将容器内容排行排列, ...
- React Native 三端同构实战
WeiboGoogle+用电子邮件发送本页面 0 React Native 三端(Web.iOS.Android)同构是指在不改动原 React Native 的代码下,让其在浏览器中运行出和在 Re ...
- 从 Android 到 React Native 开发(四、打包流程解析和发布为 Maven 库 )
1.从 Android 到 React Native 开发(一.入门) 2.从 Android 到 React Native 开发(二.通信与模块实现) 3.从 Android 到 React Nat ...
- 【React Native】在原生和React Native间通信(RN调用原生)
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
- React Native 与 嵌入Android原生与Activity页面互相跳转
前言 RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块.我们知道Android的页面跳转是通过Intent.Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露 ...
- react native与webview通信跳转页面报错:Cannot read property 'setNativeProps' of undefiend
这个错误是我这边用react native和webview通信的时候,因为要从webview跳回到react native的页面,所以就从webview传过来一个路由字符串.本来以为可以通过navig ...
- React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转
1 实现的功能 在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一 ...
最新文章
- 使用jQuery的.css()和.attr()方法设置元素left属性的注意点
- paloalto防火墙版本升级
- intelliJ idea运行新的test功能时,报错:class not found ..... empty test suite
- Service xxx does not have a SELinux domain defined
- 易语言 设置屏幕刷新率 源码_一块好的手机屏幕应具备什么条件?现在了解还不晚...
- 用python操作浏览器的三种方式_python的webbrowser模块支持对浏览器进行一些操作...
- 【DP】Mobile Service(jzoj 1327)
- ftp如何预览图片 解决方案
- cookie无法读取bdstoken_Web自动化测试:对cookie的操作
- 异常的继承关系与捕获关系(只有直系的继承关系时,下面的类才能被捕获,和辈分无关!!)
- zabbix------监控小技巧
- 250个jquery 插件
- 2.5. 标准路由器:Zend_Controller_Router_Rewrite
- ubuntu查看像素坐标和像素值GUI工具 【 mtpaint 】
- Angular测试机床TestBed
- SQL常用脚本大全,建议收藏!
- 国际品牌会员俱乐部VTN甄选全球好物 把握消费升级趋势 引领品牌高质量发展
- 电商商品爬虫,亚马逊amazon采集源码
- 《扫雷》游戏递归算法分析
- PS快速选择照片背景