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获取父节点方法
Aug 20 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
php强制下载类型的实现代码
2011/04/21 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
js玩一玩WSH吧
2007/02/23 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
C#中的验证控件有几种
2014/03/08 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
施工工地安全标语
2014/06/07 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android