Reac Native入门技法三-程序员宅基地

技术标签: ViewUI  移动开发  javascript  

第三篇,说一说页面跳转与传值。 react-navigation组件使用来做页面跳转的。 使用下面的命令进行安装。

npm install --save react-navigation
复制代码

两个页面分别写在两个js文件中,第一个是index.android.js,第二个页面是Profile.js

首先是index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button
} from 'react-native';

import ProfileScreen from './Profile.js';

import {
  StackNavigator,
} from 'react-navigation';



export default class debug extends Component {
  static navigationOptions = {
    title: '1',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to 2 page"
        onPress={() => navigate('Profile', { user: 'Lucy' })}
      />
    );
  }

}
const App = StackNavigator({
  Main: { screen: debug },
  Profile: { screen: ProfileScreen },
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});


AppRegistry.registerComponent('debug', () => App);
复制代码

首先需要引入第二个页面和react-navigation组件。

import ProfileScreen from './Profile.js';

import {
  StackNavigator,
} from 'react-navigation';
复制代码

然后声明页面

const App = StackNavigator({
  Main: { screen: debug },
  Profile: { screen: ProfileScreen },
});
复制代码

debug就是第一个页面,ProfileScreen 是第二个页面。

再然后是注册App

AppRegistry.registerComponent('debug', () => App);
复制代码

这里要注意的是'debug'是应用的名字,后面的App是StackNavigator对象。

页面的跳转与传值

render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to 2 page"
        onPress={() => navigate('Profile', { user: 'Lucy' })}
      />
    );
  }
复制代码

在Profile.js中取到传递的值

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Text
} from 'react-native';
export default class Profile extends Component {

  static navigationOptions = {
    title: '2',
  };
  render() {
     const { params } = this.props.navigation.state;
    return (
      <Text>{params.user}This is 2 Page</Text>
    );
  }

}
复制代码

到此一个简单的页面跳转与传值就完成了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34380948/article/details/87985926

智能推荐

STM32 硬件I2C EEPROM命令解析_i2c_ee_bytewrite(-程序员宅基地

文章浏览阅读3.7k次。STM32 硬件I2C EEPROM命令解析转载▼ 转载自互联网void I2C_EE_BufferWrite(u8* pBuffer, u8 WriteAddr, u16 NumByteToWrite){ u8 NumOfPage = 0, NumOfSingle = 0, Addr = 0, count = 0_i2c_ee_bytewrite(

MathType一章内公式编号不一致解决办法_mathtype公式与序号对不齐-程序员宅基地

文章浏览阅读8.7k次,点赞7次,收藏8次。问题写论文用MathType倒腾公式的时候常常碰到公式编号对不齐的问题,如下图所示:都是在第二章中,开头公式2.1-2.5都是正常的解决方法点击MathType-章节,如图:点击下一个,找到类似的多余的章节标识删除即可:..._mathtype公式与序号对不齐

python的generator、iterator、iterable_python gnerator 和iterable-程序员宅基地

文章浏览阅读105次。##python的高级特性----迭代器 参考:python的高级特性----迭代器 迭代器主要就是节省内存。在python中可以直接作用于for循环的数据类型有以下几种:(1)集合类型的数据:list, tuple, dict, set,str(2)generator: 包括生成器和 带yield 的 generator function上述对象可以直接作用于for循环,统称为可迭代对象:iterable,我们可以通过isinstance() 判断一个对象是否是Iterable对象:i_python gnerator 和iterable

微信小程序关联企业微信的自建应用后,静默登录_企业微信静默登录-程序员宅基地

文章浏览阅读1.3k次。首先,通过wx.qy.login获取到code,然后把这个code发送给我们自己写的接口api.getCompanyId,去请求到企业微信的id wx.qy.login({ success(res) { console.log("企业微信登录"); console.log(res); if (res.code && res.code != 6000) { // 通过this.setData方法,将上方d_企业微信静默登录

收集到的 hls rtmp rtsp 视频流测试地址_公开的hlsl监控地址-程序员宅基地

文章浏览阅读2.8w次。收集到的 hls rtmp rtsp 视频流测试地址hlshttps://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8rtmprtmp://live.hkstv.hk.lxdns.com/live/hksrt..._公开的hlsl监控地址

传智书城之web.xml文件_1. 传智书城itcaststore项目web.filter包中有两个过滤器,分别用于过滤全站编码 -程序员宅基地

文章浏览阅读1k次,点赞3次,收藏6次。<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jav..._1. 传智书城itcaststore项目web.filter包中有两个过滤器,分别用于过滤全站编码 和

随便推点

从头开始搭建kubernetes集群+istio服务网格(1)—— 前期准备、安装docker、kubernetes_kubernetes docker 18.09.8-程序员宅基地

文章浏览阅读1.4k次。(win10 + virtualbox6.0 + centos7.6.1810 + docker18.09.8 + kubernetes1.15.1 + istio1.2.3)本系列分为三章,第一章是创建虚拟机、docker、kubernetes等一些基础设施;第二章是在此基础上创建一个三节点的kubernetes集群;第三章是再在之上搭建istio服务网格。本文参考了大量其他优秀作者的创作(已经在开头列出),自己从零开始,慢慢搭建了istio服务网格,每一步都在文章中详细地列出了。_kubernetes docker 18.09.8

google app engine 实现的网络硬盘,支持外链、权限管理和批量上传_google硬盘外链-程序员宅基地

文章浏览阅读626次。picasa被封之后一直找不到合适的地方放相册,后来看到了google app engine。 用GAE开发了一个简单的网络硬盘,支持外链、权限设置和多文件批量上传功能。 权限设置部分通过设置目录属性实现,设为私有则只有APP的管理员登录后才可见,也可设是否对访问者列出目录内容。 多文件批量上传功能通过flex实现的,客户端需要flash player 10以上,上传失败会自动重试。测试中遇到个别文件上传总是失败,原因还未知_google硬盘外链

matlab进行m k检验,用Matlab进行MK检验.doc-程序员宅基地

文章浏览阅读3.1k次。用Matlab进行MK检验用Matlab进行Mann-Kendall分析一、M-K趋势分析法与M-K突变检验的原理介绍1、Mann-Kendall趋势分析法非参数检验,又称任意分布检验,它不对变量的分布做严格假定,检验不针对特定的参数,而是模糊地对变量分布的中心位置或分布状态做检验,由于其不对总体分布做严格假定,因而适用性强[12]。因此,本文采用非参数的Mann-Kendall检验法对昌马河流域..._matlab mk 趋势检测结果

windows开机自启bat_servers 2016 设置开机启动.bat程序-程序员宅基地

文章浏览阅读6.3k次。windows 开机自动运行bat,bat文件放到“启动”目录即可。具体步骤:(1)打开C盘,依次按下图,查看->隐藏文件项目打勾->打开文件夹ProgrameData。或者直接粘贴访问C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp(2)拷贝bat到该启动目录下。————————————————版权声明:本文为CSDN博主「木易GIS」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声_servers 2016 设置开机启动.bat程序

【收藏】计算机专业常用学习网站_计算机学习网站-程序员宅基地

文章浏览阅读9.8k次,点赞27次,收藏174次。计算机专业常用的网站_计算机学习网站

matlab中plot()函数用法大全_matlab 画曲线 向量函数-程序员宅基地

文章浏览阅读4w次,点赞9次,收藏113次。plot() 函数是绘制二维图形的最基本函数,它是针对向量或矩阵的列来绘制曲线的。使用plot 函数之前,必须首先定义好曲线上每一点的x 及y 坐标.下面简单介绍!工具/原料matlab2012b+win7.8方法/步骤1 plot(x) 当x 为一向量时,以x 元素的值为_matlab 画曲线 向量函数

推荐文章

热门文章

相关标签