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代码
Sep 07 Javascript
javascript document.images实例
May 27 Javascript
js字符串转成JSON
Nov 07 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 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日历程序
2006/12/06 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
js微信分享实现代码
2020/10/11 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python 如何调用远程接口
2020/09/11 Python
建筑工程技术应届生自荐信
2013/09/27 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
一夜的工作教学反思
2014/02/08 职场文书
讲座主持词
2014/03/20 职场文书
妈妈活动方案
2014/08/15 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
学生通报表扬范文
2015/05/04 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
幼儿园见习总结
2015/06/23 职场文书