RN导航路由配置(包含禁用左右滑动返回到上一个页面,以及无组件导航的案例)

已于 2024-05-11 19:38:22 修改
阅读量511 收藏 9
点赞数 5
分类专栏： react 文章标签： react native react.js javascript
于 2024-03-23 19:07:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68658847/article/details/136970900
版权

文章目录

tabbar底部导航栏

安装依赖包

需要安装四个依赖包（自己找适配自己RN的导航版本，我这里RN下面的依赖目前都是最新的，如下图所示）react-navigation/native 网站
yarn add @react-navigation/native
yarn add @react-navigation/bottom-tabs
yarn add react-native-screens react-native-safe-area-context

在这里插入图片描述

新建两个tabbar页面

这里我做的homeScreen.js和SettingsScreen.js

homeScreen.js

import {Text, View} from 'react-native';

export default function homeScreen() {
  return (
    <View>
      <Text>123</Text>
    </View>
  );
}

SettingsScreen.js

import {Text, View} from 'react-native';

export default function SettingsScreen() {
  return (
    <View>
      <Text>456</Text>
    </View>
  );
}

配置tabbar页面，这里新起个页面，例如我这里做个MyTabs.js

MyTabs.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './homeScreen'
import SettingsScreen from './SettingsScreen'
import { Image } from 'react-native';
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon:({color,size})=>{
        return (  // 底部栏图标
          <Image style={{width:15,height:15}} source={require('./1212.png')}></Image>
        )
      }}}/>
      <Tab.Screen name="Settings" component={SettingsScreen} options={{tabBarIcon:({color,size})=>{
        return (
          <Image style={{width:15,height:15}} source={require('./1212.png')}></Image>
        )
      }}}/>
    </Tab.Navigator>
  );
}

export default MyTabs

App.js内容如下

import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './src/MyTabs';
function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
export default App

项目结构如下：
在这里插入图片描述
效果图
在这里插入图片描述

非tabbar页面的导航

安装三个插件
yarn add @react-navigation/native 如果上面装过了这个就不用装了
yarn add @react-navigation/stack
yarn add react-native-gesture-handler

homeScreen.js

import {Button, Text, View} from 'react-native';

export default function homeScreen(params) {
  console.log(params);
  return (
    <View>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Text>123</Text>
      <Button title='点击跳转另一个页面' onPress={()=>{params.navigation.navigate('Setting',{name:'zhangsan'})}}></Button>
    </View>
  );
}

settingsScreen.js

import {Button, Text, View} from 'react-native';

export default function SettingsScreen(props) {
  return (
    <View>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Text>456</Text>
      <Button title='返回到上一级' onPress={()=>{props.navigation.goBack()}}></Button>
    </View>
  );
}

配置导航路由页面MyTab.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './homeScreen';
import SettingsScreen from './SettingsScreen';

const Stack = createStackNavigator();

function MyTabs() {
  return (
    <Stack.Navigator> // screenOptions={{ headerShown: false }} 这里还有个参数可以隐藏上面的导航条，我这里没有加，如果有需要隐藏就加上，如果需要这个返回键又需要在导航条加样式的话，建议自己做个组件
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Setting" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

export default App;

App.js

import MyTabs from './src/MyTabs';
function App() {
  return (
      <MyTabs />
  );
}
export default App

效果图
在这里插入图片描述
点击跳转后的效果图
在这里插入图片描述

跳转后的新页面可以通过props.route拿到路由参数

既有底部导航，也有页面导航

下载的依赖包就是上面两种所安装的所有的

示例代码

import {Text, StyleSheet, View, Button} from 'react-native';
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
const Tab = createBottomTabNavigator();

function FeedScreen(props) {
  // 跳转方法prop.navigation.navigate参数是路由名称也就是Stack.Screen name
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>HomeScreen</Text>
      <Button
        title={'跳到Profile页面'}
        onPress={() => props.navigation.navigate('Profile')}
      />
      <Button
        title={'跳到Settings页面'}
        onPress={() => props.navigation.navigate('Settings')}
      />
    </View>
  );
}

function MessagesScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>NewsScreen</Text>
    </View>
  );
}

function ProfileScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>ProfileScreen</Text>
    </View>
  );
}

function SettingsScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>SettingsScreen</Text>
    </View>
  );
}

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Messages" component={MessagesScreen} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();

export default class Index extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{headerShown: false}}
          />
          <Stack.Screen name="Profile" component={ProfileScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 40,
  },
});

在app.js引入

import MyTabs from './src/MyTabs';
function App() {
  return (
      <MyTabs />
  );
}
export default App

效果图
在这里插入图片描述

在这里插入图片描述
自定义底部导航栏样式(还是以上面代码为基准,给Home这个组件内的Tab.Navigator这个标签加个tabBar属性,这个指向的就是自定义标题栏)

import {Text, StyleSheet, View, Button, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
const Tab = createBottomTabNavigator();

function FeedScreen(props) {
  // 跳转方法prop.navigation.navigate参数是路由名称也就是Stack.Screen name
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>HomeScreen</Text>
      <Button
        title={'跳到Profile页面'}
        onPress={() => props.navigation.navigate('Profile')}
      />
      <Button
        title={'跳到Settings页面'}
        onPress={() => props.navigation.navigate('Settings')}
      />
    </View>
  );
}

function MessagesScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>NewsScreen</Text>
    </View>
  );
}

function ProfileScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>ProfileScreen</Text>
    </View>
  );
}

function SettingsScreen(props) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>SettingsScreen</Text>
    </View>
  );
}

let asaq = [
  {
    name: 'Messages',
  },
  {
    name: 'Settings',
  },
];
function TabBar({navigation, state}) {
  console.log('props', navigation);
  console.log('state', state);
  // 下面这个就是自定义的tabbar样式,各位自行修改
  return (
    <View style={{height:100,flexDirection:'row',justifyContent:'space-around'}}>
      {asaq.map((item, index) => {
        return (
          <TouchableOpacity
            onPress={() => {
              navigation.navigate(item.name);
            }}>
            <Text>{item.name}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

function Home() {
  //tabbar属性是自定义底部导航栏的样式
  return (
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Messages" component={MessagesScreen} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();

export default class Index extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{headerShown: false}}
          />
          <Stack.Screen name="Profile" component={ProfileScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 40,
  },
});

上面这个自定义的导航可以直接在自定义的导航上面加样式,也可以使用绝对定位定位到任意位置

在我们某一页面我们不希望用户可以返回到上一个页面,但是发现即使使用了navigation.replace(‘路由名称’)也阻止不了用户左右滑动返回到上一个界面,本人亲测下面这个方法非常好使,各位可以试试

import React, { useEffect } from 'react';
import { BackHandler } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  useEffect(() => {
  // 使用BackHandler监听 Android 设备上的物理返回按钮（即硬件返回按钮）的按下事件。
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        // 在此处添加你的逻辑来阻止安卓上的返回事件
        return true; // 返回 true 表示已经处理了返回事件，不会继续传递
      }
    );

    return () => backHandler.remove();
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            gestureEnabled: false, // 禁用IOS的左滑返回
          }}
        />
        {/* 其他屏幕 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const HomeScreen = () => {
  return (
    // 主屏幕内容
  );
};

export default App;

无组件导航的案例

由于上面的导航都过于依赖组件,例如导航要依赖于hooks函数,通过hooks进行导航,或者直接使用组件导航到某一页面携带的navigation进行导航,但是如果方法是在一个纯js文件里面呢??怎么导航???例如我封装了一个axios.js函数,在响应拦截器里面设置当后端返回登录过期就要跳转到登录页面,那这样该怎么实现呢???就以这个案例做一下下面的封装,这个封装的函数可以在纯js文件进行调用跳转,无需依赖于页面的导航

创建工具文件

  • 这个工具文件封装了一个导航,可以跳转指定页面,同时也封装了一个函数用于返回几层页面
import {createNavigationContainerRef} from '@react-navigation/native';
import {StackActions} from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();
/**
 * 跳转到某个页面
 * @param name  页面name
 * @param params  可选,参数携带
 */
export const to = (name, params = {}) => {
  if (navigationRef.isReady()) {
    // @ts-ignore
    navigationRef.navigate(name, params);
  }
};

/**
 * 返回
 * @param count  返回几层,不写返回一层
 */
export const back = (count = 1) => {
  if (navigationRef.isReady()) {
    navigationRef.dispatch(StackActions.pop(count));
  }
};

导航器文件内添加这个工具文件属性

如果根据上面的配置配置了导航器,就找到导航器,在这个导航器页面就两个操作

  1. 引入工具包,解构出navigationRef
  2. 将工具包的navigationRef添加到NavigationContainer组件的ref属性上

下面是示例代码

import React, {Component, useContext, useEffect, useState} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import LoginScreen from '../pages/user/signin';  // 登录页
import StaffIndex from '../pages/coach/staff/index'; // 数据页面
const {width, height} = Dimensions.get('window');
const Tab = createBottomTabNavigator();

// 1.引入工具包
import {navigationRef} from '../utils/index';

const Stack = createStackNavigator();

export default function Index() {
  // 阻止手势左右滑动返回
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        // 在此处添加你的逻辑来阻止安卓上的返回事件
        return true; // 返回 true 表示已经处理了返回事件，不会继续传递
      },
    );
    return () => backHandler.remove();
  }, []);
  
  return (
  	// 2.将工具包添加到 NavigationContainer 属性上面去
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        screenOptions={{headerShown: false, gestureEnabled: false}}>
        <Stack.Screen name="StaffIndex" component={StaffIndex} />
         ...
         	其他组件配置
         ...
        <Stack.Screen name="Privacy" component={Privacy} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({});

使用

这里使用我个人封装的axios文件,当后端返回的是登录过期,则跳转登录页面,这个页面也是两步操作

  1. 引入工具包,解构出to方法
  2. 登录过期,使用to方法执行跳转首页

下面是示例代码

import axios from 'axios';
import Toast from 'react-native-root-toast';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 1.引入工具包,解构出to方法
import {to} from '../utils/index';

const instace = axios.create({
  baseURL: 'https://internal.takehr.cn', //接口地址
  timeout: 5000, //超时时间
});

//配置请求拦截器,在请求之前的数据处理,比如在请求头添加token,所有的请求都会经过拦截器
instace.interceptors.request.use(
  async config => {
    try {
      const token = await AsyncStorage.getItem('token');
      const venue = await AsyncStorage.getItem('venueSn');
      if (token) {
        // console.log('JSON.parse(token)',JSON.parse(token));
        config.headers.token = JSON.parse(token);
      }
      if (venue) {
        // console.log('JSON.parse(venue)', JSON.parse(venue));
        config.headers['venue-sn'] = JSON.parse(venue);
      }
      // console.log('config', config);
      return config;
    } catch (error) {
      return Promise.reject(error);
    }
  },
  err => {
    return Promise.reject(err);
  },
);

//配置响应拦截器
// 响应拦截器:在请求响应之后对数据处理，比如:登录失败、请求数据失败的处理
instace.interceptors.response.use(
  response => {
    if(response.data.code === '登录过期'){
    	// 2.登录过期,使用to方法执行跳转首页
		to('LoginScreen');
		return;
	}
	
    if (response.data.code != 1) {
      Toast.show(response.data.msg, {
        duration: 2000, // 显示时长
        position: Toast.positions.CENTER, // 将弹窗内容居中显示
      });
    }
    return response; //这里的response就是请求成功后的res , response.data即是请求成功后回调函数内的参数res.data
  },
  err => {
    console.log('err', err);
    Toast.show(err.message, {
      duration: 2000, // 显示时长
      position: Toast.positions.CENTER, // 将弹窗内容居中显示
    });
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  },
);

//封装请求的api
const callapi = (method = 'GET', url, data = {}, customHeaders = {}) => {
  if (method === 'GET') {
    return instace({
      method,
      url,
      params: data,
      ...customHeaders,
    });
  } else {
    return instace({
      method,
      url,
      params: {},
      data: data,
      ...customHeaders,
    });
  }
};
//封装GET,POST请求函数
export const getapi = (url, data, customHeaders) =>
  callapi('GET', url, data, customHeaders);
export const postapi = (url, data, customHeaders) =>
  callapi('POST', url, data, customHeaders);

参考教程

萧寂173
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
RN项目之react-Navigation(路由导航)
01-08
RN项目之Navigation react navigation地址：https://reactnavigation.org/ 在任何一个项目都离不开路由、关于RN的路由总结以下几点 一、**基本** 首先安装基本模块npm install @react-navigation/native -S或yarn add @react-navigation/native 然后再安装npm install @react-navigation/stack 使用 import { NavigationContainer } from '@react-navigation/native'
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
规则化的视觉样式配置，适应各类产品风格。基于 React Native 的多平台支持。使用 TypeScript 开发，提供类型定义文件。演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --...
RN路由
Raccon_的博客
04-14 746
路由 下载navigation依赖 npm i @react-navigation/native 下载栈路由依赖 npm i @react-navigation/native-stack npm i @react-navigation/elements # 如果缺少对应的模块就按照提示安装对应的模块 下载路由回收（普通屏幕和刘海屏） npm i react-native-screens react-native-safe-area-context 路由配置 import React from 'r
【iOS开发】(五)react Native路由和导航20240421-22
最新发布
qq_53433382的博客
04-23 844
路由和导航是Web和移动应用中至关重要的概念，它们用于指导用户在应用的不同部分和页面之间移动。在React Native中，路由和导航是管理应用中页面或视图之间切换的关键技术。要实现这一功能，通常会使用第三方库，因为React Native本身并不包括内建的导航系统。React Navigation：流行的路由和导航库的组件。。这是React Native中最流行的导航库组件之一。它支持堆栈导航、标签导航、抽屉导航等多种导航方式。
RN应用中的路由导航
hdj0511的博客
10-19 407
RN应用中的路由导航
RN-路由---基础
青山_袁同学的博客
10-23 194
导航
RN路由-React Navigation组件5.x-基本原理(中文文档)
大灰狼的小绵羊哥哥的博客
07-14 2249
##引言 React Native路由导航，有它就够了！该文档根据React Navigation文档翻译，有些内容会根据自己的理解进行说明，不会照搬直译，若发现理解有问题的地方，欢迎大家提点！由于本人是基于iOS开发，安卓版本的目前还没有去实践运行，后续有时间会去实践，如果遇到问题，可以@我。最后，这边针对iOS运行的时候遇到的问题也有汇总，并提供解决方案。最后的最后，由于本片文章会很长，所以推荐一个Chrome插件，可以自动根据文章中的h1~h6生成目录，方便查看章节内容，在编写文章时也可以用哦！Sma
Rn Tab导航
05-11
react-native-tab-navigator第三方库实现的Tab导航
IOS页面滑动返回
12-16
IOS页面滑动返回 MLNavigationController导航栏使用这个即可
Rn Tab导航封装
05-12
Rn Tab导航封装，支持动态设置Tab和标题栏
React Native （RN）动态权限路由导航（react-navigation）配置
qq_42675769的博客
03-10 866
其实实现动态路由就是把不同类型的（StackNavigator，TabNavigator，DrawerNavigator）导航，动态的配置它们的RoutConfigs，NavigatorConfig属性。前者配置组件路由，后者配置导航样式属性等。
2. RN笔记 - 路由(react-navigation)
不乱于心, 不困于情,不畏将来,不念过往
06-29 541
RN笔记 - 路由(react-navigation)
rn实现类动态路由
qq_45619095的博客
08-29 180
点击左侧菜单栏，右侧内容区跟着变，根组件是用栈导航写的
rn php,RN和React路由详解及对比
weixin_42557537的博客
03-11 222
前言在平时H5或者RN开发时，我们业务场景中大部分都不是单页面的需求，那这时我们就能使用路由在进行多页面的切换。下面会对比一下react路由和RN路由的本质区别和使用方法。路由(routing)是指分组从源到目的地时，决定端到端路径的网络范围的进程React路由简介使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是r...
RN与Native混合App的路由方案
爬不上树的小松鼠
01-06 952
RN与Native的路由优化
实现RN导航的操作步骤
weixin_50365835的博客
03-15 310
1.核心层的引入，native 2.需要考虑的是什么导航模式(stack，drawer，tabs，modal) 3.模式的实例化 4.用导航容器将导航内容进行包含 5.导航内容需要有Navigator以及Screen 6.Screen导航内容中需要包含对应的组件 7.RN的导航会自动构建导航标题部分 详情 ...
react-navigation禁止侧滑
koufulong的博客
07-11 2109
在createStackNavigator后加上一下方法： defaultNavigationOptions: { gesturesEnabled: false, },
关于RN项目版本导致react-native-screens及react-native-safe-area-context报compileDebugKotlin的问题。
G1ANTS的博客
06-28 2135
react-native-screens react-native-safe-area-context react-navigation react-native
RN使用Router路由设计一个导航页，在同一个页面渲染不同的页面
05-19
下面是一个简单的例子，演示如何在同一个页面中渲染不同的页面： 首先，在终端中运行以下命令来安装React Navigation库： ``` npm install @react-navigation/native ``` 接下来，安装Stack Navigator： ``` npm...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值