react native 导航器 Navigator 简单的例子
最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把。总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要学习的还有很多。
react native的导航器 Navigator 就像是网页的路由,官方给的有点看不明白,试了好几次才成功,在这里整理一下。
首先在生成的项目里建一个文件MyScene.js,这个也可以不用建,这个只是把跳转后的内容包含进来用而已,如果建了文件,则文件里的内容是:
import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';
//class MyScene extends Component {这种定义的类是在不包含的时候用
//export default class MyScene extends Component {这种定义的方法是在包含此文件的时候用
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>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
)
}
}
然后在index.android.js的文件里写:
import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';
import MyScene from './MyScene';//引入刚刚建好的文件。
export default class MyProject 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('MyProject', () => MyProject);//这句话一定要加上
最后的效果:
react native 导航器 Navigator 简单的例子的更多相关文章
- React Native导航器Navigator
React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...
- React Native之Navigator
移动应用很少只包含一个页面.从你添加第二个页面开始,就得考虑如何管理多个页面间的跳转了. 导航器正是为此而生.它可以管理多个页面间的跳转,也包含了一些常见的过渡动画,包括水平翻页.垂直弹出等等. Na ...
- React Native之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之Fetch简单封装、获取网络状态
1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...
- React Native ——实现一个简单的抓取github上的项目数据列表
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- React Native使用Navigator组件进行页面导航报this.props....is not a function错误
在push的时候定义回调函数: this.props.navigator.push({ component: nextVC, title: titleName, passProps: { //回调 g ...
- React Native中Navigator的安装与使用
一.安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-cust ...
- React Native - 4 ListView 简单使用
1. 首先要import ListView组件 2. 使用如下代码,注意ListView里的dataSource大小写,我当时把S给小写了,结果花了半个多小时找原因…… 3. 运行结果
随机推荐
- Sharding-JDBC自定义复合分片算法
Sharding-JDBC自定义复合分片算法 一.背景 二.需求 1.对于客户端操作而言 2.对于运营端操作而言 三.分片算法 1.客户id和订单id的生成规则 2. 确定数据落在那个表中 3.举例说 ...
- CSP-S 2021 退役记
写的比较草率,但的确是真实感受. 10.23 回寝室前敲了一个 dinic 板子,觉得不会考... 10.24 8:00 起床,还好今天宿管不在,可以起的晚一点. 吃了早饭来机房颓废. 10:00 似 ...
- 从零开始的DIY智能浇水应用
前言 作为一个新世纪打工人,平常也会去养一些花草,来给我的房间增加点绿色和活力,但是常常因为工作忙而忘记一些事情.,毕竟我大部分的时间都是陪伴着电脑的(严正声明:我不是个单身狗!!! (¬◡¬)✧), ...
- python 3 range函数类型
在python3中 print(range(10))range(0,10) 得出的结果是 range(0,10) ,而不是[0,1,2,3,4,5,6,7,8,9] ,为什么呢?而且原来Python2 ...
- Luogu P3758 [TJOI2017]可乐 | 矩阵乘法
题目链接 让我们先来思考一个问题,在一张包含$n$个点的图上,如何求走两步后从任意一点$i$到任意一点$j$的方案数. 我们用$F_p(i,j)$来表示走$p$步后从$i$到$j$的方案数,如果存储原 ...
- httprunner3源码解读(2)models.py
源码目录结构 我们首先来看下models.py的代码结构 我们可以看到这个模块中定义了12个属性和22个模型类,我们依次来看 属性源码分析 import os from enum import Enu ...
- springcloud3(六) 服务降级限流熔断组件Resilience4j
代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-gateway/src/test/java/com/ ...
- SSH服务器拒绝了密码。请再试一次。怎么改都不行
使用Xshell连接服务器,之前还好好的,突然之间就报"SSH服务器拒绝了密码.请再试一次"的错误. 1.检查 检查了IP.连接端口.用户.密码.网络是否正确? 本机情况:能够pi ...
- Rancher 下图形界面 搭建 K8S 集群
首先我们准备4台 2核3G 的 centos 7 温馨提示:先安装好一台 CentOS 的虚拟机,并且安装好 docker,永久关闭防火墙. 再这个基础上我们分别克隆出四台 Rancher.K8S1. ...
- 【JAVA】编程(2)---时间管理
作业要求: 定义一个名为 MyTime 的类,其中私有属性包括天数,时,分,秒:定义一个可以初始化时,分,秒的构造方法,并对初始化数值加以限定,以防出现bug:定义一个方法,可以把第几天,时,分,秒打 ...