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 

相关文章： 5种Android数据存储方式汇总  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  已有域名和空间，如何快速搭建网站？  建站主机默认首页配置指南：核心功能与访问路径优化  ,交易猫的商品怎么发布到网站上去？  建站之星后台密码如何安全设置与找回？  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  海南网站制作公司有哪些,海口网是哪家的？  宝塔建站助手安装配置与建站模板使用全流程解析  网站制作公司,橙子建站是合法的吗？  建站VPS选购需注意哪些关键参数？  如何制作一个表白网站视频,关于勇敢表白的小标题？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  招贴海报怎么做,什么是海报招贴？  如何选择适配移动端的WAP自助建站平台？  如何在建站之星网店版论坛获取技术支持？  手机网站制作与建设方案,手机网站如何建设？  如何在云主机快速搭建网站站点？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  制作企业网站建设方案,怎样建设一个公司网站？  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  如何用低价快速搭建高质量网站？  广州美橙建站如何快速搭建多端合一网站？  如何通过IIS搭建网站并配置访问权限？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  香港服务器WordPress建站指南：SEO优化与高效部署策略  建站之星如何实现五合一智能建站与营销推广？  IOS倒计时设置UIButton标题title的抖动问题  网站制作新手教程,新手建设一个网站需要注意些什么？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  如何高效配置香港服务器实现快速建站？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何在Windows服务器上快速搭建网站？  如何用已有域名快速搭建网站？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  如何基于云服务器快速搭建个人网站？  如何选择PHP开源工具快速搭建网站？  营销式网站制作方案,销售哪个网站招聘效果最好？  个人摄影网站制作流程,摄影爱好者都去什么网站？  电商网站制作公司有哪些,1688网是什么意思？  Java解压缩zip - 解压缩多个文件或文件夹实例  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  存储型VPS适合搭建中小型网站吗？