reactive-native 路由、页面跳转

最新推荐文章于 2025-07-16 10:39:15 发布

原创最新推荐文章于 2025-07-16 10:39:15 发布 · 929 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reactive-native 路由 #reactive-native 页面跳转 #reactive-native 跳转

react-native 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在React Native项目中配置并使用react-navigation进行页面跳转和传参，包括安装依赖、配置路由、页面跳转及参数传递等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

1、在你的 React Native 项目中安装react-navigation这个包

npm install --save react-navigation

2、安装 react-native-gesture-handler

npm install --save react-native-gesture-handler

3、Link 所有的原生依赖

react-native link react-native-gesture-handler

iOS 啥都不用做，在 Android 上的安装，请确保在 MainActivity.java 上完成如下修改：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

使用

1、建立一个navigator.js存放路由配置

import React from 'react';
import {createAppContainer, createStackNavigator, StackNavigator} from 'react-navigation';
//引入页面
import Login from '../page/Login';
import Reg from '../page/Reg';
import App from '../page/App';

const AppNavigator = createStackNavigator({
        Login: {
            screen: Login,
            //不显示标题栏
            navigationOptions: {
                header: null
            }
        },
        Reg: {
            screen: Reg
        },
        App: {
            screen: App
        }
    },
    {
        //默认显示页面
        initialRouteName: "App"
    }
);
export default createAppContainer(AppNavigator);

2、修改项目入口文件App.js

import React from "react";
import {createAppContainer} from "react-navigation";
//上一步创建的路由配置文件
import AppNavigator from './src/navigator/navigator'

const AppContainer = createAppContainer(AppNavigator);

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

3、页面跳转
在组件onPress方法中，使用如下方式跳转页面。
navigate方法接收2个参数
参数1：路由名称
参数2：传值，可省略

//相当于html中的 href='/Reg?key1=val1'
this.props.navigation.navigate('Reg',{key1:val1});

4、在目标页面中接收传参
getParam接收2个参数，获取不到时返回null
参数1：参数名称
参数2：默认值

this.props.navigation.getParam('paramsName',defalutValue)