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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
AngularJs中$cookies简单用法分析
May 30 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python常用列表数据结构小结
2014/08/06 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
应届生法律顾问求职信
2013/11/19 职场文书
代理班主任的自我评价
2014/02/04 职场文书
影视广告专业求职信
2014/09/02 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
工作失职自我检讨书
2015/05/05 职场文书
联谊会开场白
2015/06/01 职场文书
首都博物馆观后感
2015/06/05 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Golang ort 中的sortInts 方法
2022/04/24 Golang