我的编程空间,编程开发者的网络收藏夹
学习永远不晚

react native路由跳转怎么实现

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

react native路由跳转怎么实现

react native路由跳转怎么实现

本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。

react native路由跳转怎么实现?

React Native-路由跳转

搭建完RN开发环境后,要实现多个页面之间的跳转。

1.这时需要安装react-navigation(在此之前的Navigator和ex-Navigation已经废弃),使用yarn add react-navigation命令进行安装。

2.react-navigation依赖于react-native-gesture-handler组件,因此也需要使用yarn add react-native-gesture-handler命令进行安装。

3.两个组件安装成功后,在index.js(入口文件,有可能是index.android.js或index.ios.js)注册一个App组件,引用自setup.js。

4.在setup.js中导入createStackNavigator, createAppContainer两个函数和两个页面。

import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";

5.用createStackNavigator封装好两个页面的路由和的配置,设置好初始路由。

const AppNavigator = createStackNavigator({
    Login: {
        screen:Login,
        navigationOptions: {
            title: '冷链物流助手',
            headerTitleStyle:{
                textAlign: 'center',
                flex:1,
            }
        }
    },
    ScanDevice: {
        screen:ScanDevice,
        navigationOptions: {
            title: '扫描设备',
            headerTitleStyle:{
                textAlign: 'center',
                marginLeft:-25,
                flex:1,
            }
        }
    },
},{
    initialRouteName: 'Login'
});

6.将配置好的AppNavigator再用另一个函数createAppContainer封装,然后以类的组件的形式导出。

const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

7.运行react-native run-android,如有报错则查询谷歌一步步解决。若出现Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED报错,则按照https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767解决。

推荐学习:《react视频教程》

以上就是react native路由跳转怎么实现的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

react native路由跳转怎么实现

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

react native路由跳转怎么实现

react native路由跳转的实现方法:1、使用“yarn add react-navigation”命令安装“react-navigation”;2、通过“yarn add react-native-gesture-handler”命令安装“react-native-gesture-handler”组件;3、设置好初始路由,然后以类的组件的形式导出即可。
2023-05-14

react native路由跳转如何实现

这篇文章主要讲解了“react native路由跳转如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native路由跳转如何实现”吧!react native路由跳转的实现
2023-07-04

react-router-dom路由跳转怎么实现

react-router-dom路由跳转的实现方法:1、打开相应的js文件;2、通过useNavigate方法手动操作进行路由跳转;3、通过state属性进行路由传值,并用useLocation方法获取参数。
2023-05-14

react 4.0 路由怎么跳转

react4.0路由跳转的方法:1、通过“npm install history --save”安装“history”;2、在要跳转的地方对应的js文件中,引入createHashHistory并执行代码“import { createHashHistory } from 'history'createHashHistory().push('/share')”即可。
2023-05-14

react-router-dom路由跳转如何实现

这篇“react-router-dom路由跳转如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react-router
2023-07-04

springMVC路由跳转怎么实现

本篇内容介绍了“springMVC路由跳转怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现目标:使用springMVC前端控制器,
2023-06-30

react中路由跳转及传参的实现

本文主要介绍了react中路由跳转及传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-19

react如何实现路由跳转前确认

这篇文章主要介绍“react如何实现路由跳转前确认”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。react实现路由跳转前确认功能的方法:1、
2023-07-05

实例讲解vue怎么实现父级路由跳转子路由

在Vue中,我们经常需要进行路由跳转操作。Vue的路由功能非常强大,支持嵌套路由和动态路由等功能。本文将讲述如何父级路由跳转子路由。1. 子路由配置首先,我们需要在父级路由中配置子路由。在Vue中,可以使用Vue Router插件来实现路由管理和控制。下面是子路由的配置方式:```const routes = [ { path: '/parent',
2023-05-14

React中的路由嵌套和手动实现路由跳转的方式详解

这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转,主要是通过Link或者NavLink进行跳转的,实际上我们也可以通JavaScript代码进行跳转,需要的朋友可以参考下
2022-11-13

uniapp路由怎么实现带参数的跳转

UniApp是一款跨平台开发框架,支持编写一次代码即可同时发布到多个平台。在UniApp中,我们经常需要使用路由跳转功能来实现不同页面之间的跳转。其中,带参数跳转是比较常见的一种情况。本文将介绍如何使用UniApp路由带参数跳转。一、路由跳转在UniApp中,我们通过uni.navigateTo()函数实现路由跳转。通过该函数可以实现从一个页面跳转到另一个页面,例如从首页跳转到
2023-05-14

怎么在React中利用路由实现一个登录界面的跳转

怎么在React中利用路由实现一个登录界面的跳转?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、首先看一下总体的目录结构。因为很多时候在看别人写的例子的时候因为目录结构不熟悉
2023-06-14

vue如何实现父级路由跳转子路由

今天小编给大家分享一下vue如何实现父级路由跳转子路由的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。子路由配置首先,我们需要
2023-07-05

vue中如何实现路由跳转

这篇文章主要介绍vue中如何实现路由跳转,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!跳转方式:1、用“”语句;2、用“this.$router.push()”语句;3
2023-06-25

react怎么实现跳转支付

react实现跳转支付的方法:1、执行“const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0].submit();”语句实现跳转;2、使用“qrcode.react”生成二维码,再跳转页面。
2023-05-14

react怎么实现跳转页面

react实现跳转页面的方法:1、通过“import { Button } from 'antd';”引入button组件;2、在button组件里面写onclick;3、在render外面写方法内容为“tiaozhuan(){window.location.href=""}”;4、使用link路由;5、使用a标签进行跳转即可。
2023-05-14

vue3中怎么使用router路由实现跳转传参

本文小编为大家详细介绍“vue3中怎么使用router路由实现跳转传参”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中怎么使用router路由实现跳转传参”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一
2023-07-06

编程热搜

目录