react-native使用react-navigation进行页面跳转导航

本文主要是介绍react-native使用react-navigation进行页面跳转导航,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先要确认已经配置好react-native的环境。

 

 
# 创建一个native应用,SimpleApp
# 然后进入项目目录 react-native init SimpleApp cd SimpleApp 
# 通过npm安装最新版本的react-navigation npm install --save react-navigation 
# 运行程序 react-native run-android

 

 

 

引入Stack Navigator

对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个概念的“堆栈”导航,其中每个新屏幕都放在堆栈顶部,然后从堆栈顶部移除一个屏幕。

 
import React from 'react';import {AppRegistry,Text,} from 'react-native';import { StackNavigator } from 'react-navigation';class HomeScreen extends React.Component {static navigationOptions = {title: 'Welcome world',};render() {return <Text>Hello, Navigation!</Text>;}}const SimpleApp = StackNavigator({Home: { screen: HomeScreen },});AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

 

屏幕的title在静态导航选项中是可配置的,在这里可以设置许多选项来配置导航器中的屏幕显示。

 

添加一个新的屏幕

 
class ChatScreen extends React.Component {static navigationOptions = {title: 'Chat with Lucy',};render() {return (<View><Text>Chat with Lucy</Text></View>);}}

 

然后在HomeScreen添加一个按钮,链接到ChatScreen

 

class HomeScreen extends React.Component {static navigationOptions = {title: 'Welcome',};render() {const { navigate } = this.props.navigation;return (<View><Text>Hello, Chat App!</Text><ButtononPress={() => navigate('Chat')}title="Chat with Lucy"/></View>);}

 

 

最后将添加的两个页面添加到StackNavigator中

const SimpleApp = StackNavigator({Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});

 

在这里,可以传递参数,从HomeScreen传递

class HomeScreen extends React.Component {static navigationOptions = {title: 'Welcome',};render() {const { navigate } = this.props.navigation;return (<View><Text>Hello, Chat App!</Text><ButtononPress={() => navigate('Chat', { user: 'Lucy' })}title="Chat with Lucy"/></View>);}}

 

ChatScreen接收参数

class ChatScreen extends React.Component {// Nav options can be defined as a function of the screen's props:static navigationOptions = ({ navigation }) => ({title: `Chat with ${navigation.state.params.user}`,});render() {// The screen's current route is passed in to `props.navigation.state`:const { params } = this.props.navigation.state;return (<View><Text>Chat with {params.user}</Text></View>);}}

 

 

添加第三个页面,Three.js, ChatScreen跳转到Three

 
import React,{Component} from 'react';import {AppRegistry,Text,View,Button,} from 'react-native';class Three extends React.Component {static navigationOptions = {title: 'Three Sceen',};render() {const { goBack } = this.props.navigation;return (<Buttontitle="Go back"onPress={() => goBack()}/>);}}export default Three;

 

修改ChatScreen的配置

class ChatScreen extends React.Component {static navigationOptions = {title: 'Chat with Lucy',};render() {const { navigate } = this.props.navigation;return (<View><Text>Chat with Lucy</Text><ButtononPress={() => navigate('Three')}title="to to ThreeScreen"/></View>);}}

 

最后的结果如下:

 

 

 

 

 

 

 

最后给出完整代码

 

文件 index.android.js

i

mport SimpleApp from './App';

 

文件App.js

import React from 'react';import {AppRegistry,Text,View,Button,} from 'react-native';import { StackNavigator } from 'react-navigation';import ThreeScreen from './Three.js';class HomeScreen extends React.Component {static navigationOptions = {title: 'Welcome',};render() {const { navigate } = this.props.navigation;return (<View><Text>Hello, Chat App!</Text><ButtononPress={() => navigate('Chat')}title="Chat with Lucy"/></View>);}}class ChatScreen extends React.Component {static navigationOptions = {title: 'Chat with Lucy',};render() {const { navigate } = this.props.navigation;return (<View><Text>Chat with Lucy</Text><ButtononPress={() => navigate('Three')}title="to to ThreeScreen"/></View>);}}const SimpleApp = StackNavigator({Home: { screen: HomeScreen },Chat: { screen: ChatScreen },Three: { screen: ThreeScreen},});AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

 

文件Three.js

import React,{Component} from 'react';import {AppRegistry,Text,View,Button,} from 'react-native';class Three extends React.Component {static navigationOptions = {title: 'Three Sceen',};render() {const { goBack } = this.props.navigation;return (<Buttontitle="Go back"onPress={() => goBack()}/>);}}export default Three;

 

 

这篇关于react-native使用react-navigation进行页面跳转导航的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1044167

相关文章

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

Qt 中集成mqtt协议的使用方法

《Qt中集成mqtt协议的使用方法》文章介绍了如何在工程中引入qmqtt库,并通过声明一个单例类来暴露订阅到的主题数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一,引入qmqtt 库二,使用一,引入qmqtt 库我是将整个头文件/源文件都添加到了工程中进行编译,这样 跨平台

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中,括号匹配是一个常见问题,尤其是在

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个