iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react native路由跳转怎么实现
  • 565
分享到

react native路由跳转怎么实现

react-native 2023-05-14 22:05:45 565人浏览 安东尼
摘要

本教程操作环境:windows10系统、React Native0.67版、Dell G3电脑。react native路由跳转怎么实现?React Native-路由跳转搭建完RN开发环境后,要实现多个页面之间的跳转。 1.这时需要安装r

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路由跳转怎么实现的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react native路由跳转怎么实现

本文链接: https://www.lsjlt.com/news/206774.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • react native路由跳转怎么实现
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react native路由跳转怎么实现?React Native-路由跳转搭建完RN开发环境后,要实现多个页面之间的跳转。 1.这时需要安装r...
    99+
    2023-05-14
    react-native
  • react native路由跳转如何实现
    这篇文章主要讲解了“react native路由跳转如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native路由跳转如何实现”吧!react native路由跳转的实现...
    99+
    2023-07-04
  • react-router-dom路由跳转怎么实现
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react-router-dom路由跳转怎么实现?React-Router-dom路由跳转useNavigateuseNavigate方法可以手动操作进行...
    99+
    2023-05-14
    React
  • react 4.0 路由怎么跳转
    本教程操作环境:Windows10系统、React-Router v4.0版、Dell G3电脑。react 4.0 路由怎么跳转?React-Router v4.0 hashRouter使用js跳转React-Router v4.0上已经...
    99+
    2023-05-14
    react-router
  • react-router-dom路由跳转如何实现
    这篇“react-router-dom路由跳转如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react-router...
    99+
    2023-07-04
  • springMVC路由跳转怎么实现
    本篇内容介绍了“springMVC路由跳转怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现目标:使用springMVC前端控制器,...
    99+
    2023-06-30
  • react中路由跳转及传参的实现
    目录1.useNavigate2.useLocation3.示例1.useNavigate useNavigate 是 React Router v6 中新增的一个 hoo...
    99+
    2023-05-19
    react 路由跳转 react 路由传参
  • react如何实现路由跳转前确认
    这篇文章主要介绍“react如何实现路由跳转前确认”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。react实现路由跳转前确认功能的方法:1、...
    99+
    2023-07-05
  • React利用路由实现登录界面的跳转
    上一篇在配置好了webpack和react的环境后,接下来开始写登录界面,以及接下来的跳转到主页的功能。 1、首先看一下总体的目录结构。 因为很多时候在看别人写的例子的时候因为目录...
    99+
    2024-04-02
  • 实例讲解vue怎么实现父级路由跳转子路由
    在Vue中,我们经常需要进行路由跳转操作。Vue的路由功能非常强大,支持嵌套路由和动态路由等功能。本文将讲述如何父级路由跳转子路由。子路由配置首先,我们需要在父级路由中配置子路由。在Vue中,可以使用Vue Router插件来实现路由管理和...
    99+
    2023-05-14
  • Vue如何实现路由跳转
    这篇文章将为大家详细讲解有关Vue如何实现路由跳转,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。单页一应用的路由模式有再种1、哈希模式(利用hashchange事件监听u...
    99+
    2024-04-02
  • React中的路由嵌套和手动实现路由跳转的方式详解
    目录React的路由嵌套手动路由的跳转React的路由嵌套 接上一篇文章, 在上一篇文章中讲解了路由的基本介绍, 我再来介绍一下路由的其他用法 在开发中,路由之间是存在嵌套关系的。 ...
    99+
    2022-11-13
    react路由嵌套 react路由跳转 react手动路由跳转
  • vue如何实现父级路由跳转子路由
    今天小编给大家分享一下vue如何实现父级路由跳转子路由的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。子路由配置首先,我们需要...
    99+
    2023-07-05
  • uniapp路由怎么实现带参数的跳转
    UniApp是一款跨平台开发框架,支持编写一次代码即可同时发布到多个平台。在UniApp中,我们经常需要使用路由跳转功能来实现不同页面之间的跳转。其中,带参数跳转是比较常见的一种情况。本文将介绍UniApp路由带参数跳转。一、路由跳转在Un...
    99+
    2023-05-14
  • 怎么在React中利用路由实现一个登录界面的跳转
    怎么在React中利用路由实现一个登录界面的跳转?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先看一下总体的目录结构。因为很多时候在看别人写的例子的时候因为目录结构不熟悉后边...
    99+
    2023-06-14
  • react路由跳转的方式有哪些
    这篇文章主要介绍“react路由跳转的方式有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react路由跳转的方式有哪些”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • vue中如何实现路由跳转
    这篇文章主要介绍vue中如何实现路由跳转,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!跳转方式:1、用“<router-link :to="{..}">”语句;2、用“this.$ro...
    99+
    2023-06-25
  • react路由跳转不刷新如何解决
    这篇文章主要介绍了react路由跳转不刷新如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react路由跳转不刷新如何解决文章都会有所收获,下面我们一起来看看吧。react路由跳转不刷新的解决办法:1、在...
    99+
    2023-07-05
  • 基于React路由跳转的几种方式
    目录React路由跳转的几种方式1. params形式2. 使用state的形式React路由跳转传参问题使用Link传参url传参隐式传参React路由跳转的几种方式 注意: 这里...
    99+
    2024-04-02
  • vuejs如何实现路由跳转传值
    这篇文章主要为大家展示了“vuejs如何实现路由跳转传值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vuejs如何实现路由跳转传值”这篇文章吧。 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作