RN（react native）入坑指南-07,使用navigator实现页面跳转

最新推荐文章于 2024-08-20 10:37:05 发布

PKAQ

最新推荐文章于 2024-08-20 10:37:05 发布

阅读量9.9k

点赞数 4

分类专栏：跟我学React Native 文章标签： native

本文链接：https://blog.csdn.net/pkaq_/article/details/51182081

版权

本文档简要介绍了如何在React Native应用中使用Navigator组件进行页面跳转，包括设置初始页面、定义页面动画效果以及利用navigator对象进行页面操作如push、pop和jump。

摘要由CSDN通过智能技术生成

前言

　　此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.

开始

由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁

index.android.js

'use strict';

import React,{Navigator,AppRegistry} from 'react-native';

{
  /**引入Login组件 */}
import Login from './src/login/Login.js';

class TaraRn extends React.Component {
   

  render() {
    {
  /** 默认组件名称以及默认组件 */}
    let defaultName = "Login";
    let defaultComponent = Login;

    return (
     <Navigator          
          //初始化组件
          initialRoute={
  { name: defaultName, component: defaultComponent }}    
          //页面切换效果 
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;