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

);

}

}

最后的结果如下：

最后给出完整代码

文件 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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# react  # navigation跳转  # reactnative  # 页面跳转  # native页面跳转  # react-native中路由页面的跳转与传参的实例详解  # react路由跳转传参刷新页面后参数丢失的解决  # react.js实现页面登录跳转示例  # React Router 5.1.0使用useHistory做页面跳转导航的实现  # react 跳转后路由变了页面没刷新的解决方案  # react实现同页面三级跳转路由布局  # React中的页面跳转方式示例详解  # 在这里  # 放在  # 后将  # 第三个  # 最新版本  # 创建一个  # 大家多多  # 移除  # 跳转到  # 应用程序  # 器中  # 选项中  # js  # import 

相关文章： 如何选择最佳自助建站系统？快速指南解析优劣  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  北京网站制作的公司有哪些,北京白云观官方网站？  制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事？  专业公司网站制作公司,用什么语言做企业网站比较好？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  如何选择CMS系统实现快速建站与SEO优化？  建站之星如何快速解决建站难题？  建站之星免费版是否永久可用？  nginx修改上传文件大小限制的方法  设计网站制作公司有哪些,制作网页教程？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  大学网站设计制作软件有哪些,如何将网站制作成自己app？  如何彻底卸载建站之星软件？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  官网网站制作腾讯审核要多久,联想路由器newifi官网  如何选择靠谱的建站公司加盟品牌？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  建站之星导航配置指南：自助建站与SEO优化全解析  香港服务器如何优化才能显著提升网站加载速度？  制作企业网站建设方案,怎样建设一个公司网站？  网站制作服务平台,有什么网站可以发布本地服务信息？  建站之星如何取消后台验证码生成？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  淘宝制作网站有哪些,淘宝网官网主页？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  如何在服务器上配置二级域名建站？  如何用已有域名快速搭建网站？  ,石家庄四十八中学官网？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  建站之星备案流程有哪些注意事项？  详解jQuery中基本的动画方法  专业商城网站制作公司有哪些,pi商城官网是哪个？  网站制作员失业,怎样查看自己网站的注册者？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何快速辨别茅台真假？关键步骤解析  网站制作和推广的区别,想自己建立一个网站做推广，有什么快捷方法马上做好一个网站？  如何通过万网虚拟主机快速搭建网站？  如何高效完成自助建站业务培训？  行程制作网站有哪些,第三方机票电子行程单怎么开？  视频网站制作教程,怎么样制作优酷网的小视频？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  山东云建站价格为何差异显著？  ,有什么在线背英语单词效率比较高的网站？  制作农业网站的软件,比较好的农业网站推荐一下？