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


Posted in Javascript onSeptember 07, 2017

首先要确认已经配置好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>
    <Button
     onPress={() => 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>
    <Button
     onPress={() => 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 (
   <Button
    title="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>

<Button

onPress={() =>
navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}

最后的结果如下:

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

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

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

最后给出完整代码

文件 index.android.js

import 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>

<Button

onPress={() =>
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>

<Button

onPress={() =>
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 (

<Button

title="Go back"

onPress={() =>
goBack()}

/>

);

}

}

export default
Three;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 #Javascript
vue数字类型过滤器的示例代码
Sep 07 #Javascript
vue监听scroll的坑的解决方法
Sep 07 #Javascript
react高阶组件经典应用之权限控制详解
Sep 07 #Javascript
React + webpack 环境配置的方法步骤
Sep 07 #Javascript
微信小程序之页面拦截器的示例代码
Sep 07 #Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
You might like
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
List Installed Software Features
2007/06/11 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
python中的print()输出
2019/04/12 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
情人节活动策划方案
2014/02/27 职场文书
3分钟演讲稿
2014/04/30 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
python unittest单元测试的步骤分析
2021/08/02 Python