react-navigation：

琑952024-04-01 5:07

我的仓库地址：https://gitee.com/ruanjianbianjing/bj-hybrid

react-navigation：

学习文档：https://reactnavigation.org

安装核心包:

复制代码 
npm install @react-navigation/native

安装@react-navigation/native本身依赖的相关包:

  • react-native-screens：使用原生代码实现screen容器可以提高性能流畅度

  • react-native-safe-area-context：可以让我们的组件渲染在一个安全的区域（比如有些移动设备是异性的，刘海屏、挖孔屏等）

    npx expo install react-native-screens react-native-safe-area-context

    npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

入口文件（我的是App.js）引入NavigationContainer

复制代码 
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

小图标：

网址：https://icons.expo.fyi/Index

引入方式：

@expo/vector-icons

//举个例子
import { Ionicons } from "@expo/vector-icons";

如何使用堆栈导航器：

安装核心库：
npm install @react-navigation/stack

目录结构：（创建Home和Detail）

​

home组件：

复制代码 
import { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

const Home = ({navigation}) => {
    const goDetail = () => {
        navigation.navigate('detail', { data: 'pass data' })
    }
    return (
        <View style={{flex: 1}}>
            <Button 
                title='to detail'
                onPress={goDetail('detail')}
            />
          
        </View>
    )
}
const styles = StyleSheet.create({

});
export default Home

Getail组件：

复制代码 
import React from "react";
import { Text } from "react-native";

const Detail = () => {
  return (
    <div>
      <Text>详情eee</Text>
    </div>
  );
};

export default Detail;

App.js

复制代码 
import { StatusBar, Text, StyleSheet, View } from "react-native";
import "./global";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
//page下的组件
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
//两个小图标
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
//Screen路由，也是页面
//Navigator导航器

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* 首页 */}
        <Tab.Screen name="homeScreen" component={HomeScreen} />
        {/* 个人中心页 */}
        <Tab.Screen name="setting" component={Setting} />
      </Tab.Navigator>
      <StatusBar />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
});

页面之间实现跳转：

在`Home`组件中，您可以添加一个按钮或者其他交互元素，然后在点击事件中使用`navigation.navigate`方法来进行页面跳转：

import { Button } from 'react-native';

const Home = ({ navigation }) => {

return (

<View>

<Button

title="Go to Detail Page"

onPress={() => navigation.navigate('detail')}

/>

</View>

);

};

在上面的示例中，当点击按钮时，会调用`navigation.navigate('detail')`来跳转到`Detail`页面。

下面是代码展示：

复制代码 
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="home"
        component={Home}
        options={{
          title: "首页",
          tarBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Stack.Screen name="detail" component={Detail} />
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Tab.Screen
          name="homeScreen"
          component={HomeScreen}
          options={{
            title: "首页",
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen name="setting" component={Setting} />
      </Tab.Navigator>
      <StatusBar />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({});

tips：

headerMode="none"没有标题栏

headerMode="screen"每个页面都有一个标题栏（Android的默认）

使用headerStyle

复制代码 
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#f4511e",
        },
        headerTitleAlign: "center",
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="home"
        component={Home}
        options={{
          title: "首页",
          tarBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Stack.Screen name="detail" component={Detail} />
    </Stack.Navigator>
  );
};

const Setting = () => <Text>设置页面</Text>;

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Tab.Screen
          name="homeScreen"
          component={HomeScreen}
          options={{
            title: "首页",
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="home" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen name="setting" component={Setting} />
      </Tab.Navigator>
      <StatusBar />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({});

页面跳转之间传参，还有隐藏下方的小图标：

复制代码 
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#f4511e",
        },
        headerTitleAlign: "center",
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="home"
        component={Home}
        options={{
          title: "首页",
          tarBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Stack.Screen name="detail" component={Detail} />
    </Stack.Navigator>
  );
};

const Setting = () => <Text>设置页面</Text>;
// 变量
const screens = ["home", "set", "useinfo"];

// tabbar是否要显示
const tabbarIsVisible = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route);
  // console.log(routeName);
  return screens.includes(routeName);
};
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Tab.Screen
          name="homeScreen"
          component={HomeScreen}
          options={
            // 让options返回函数
            ({ route }) => {
              //   console.log(route);
              // 这是一个函数，需要引入,把它移动到上面的tabbarIsVisible函数里面
              // const routeName = getFocusedRouteNameFromRoute(route);
              return {
                // 这行以下是非函数的
                title: "首页",
                tabBarIcon: ({ color, size }) => (
                  <Ionicons name="home" size={size} color={color} />
                ),
                // 每个tab项有一个自己的属性
                tabBarStyle: {
                  //   display: routeName !== "home" ? "none" : "block",
                  // 换成函数调用
                  display: tabbarIsVisible(route) ? "block" : "none",
                },
              };
            }
          }
        />
        <Tab.Screen name="setting" component={Setting} />
      </Tab.Navigator>
      <StatusBar />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({});

最终效果展示：（视频地址）

https://www.bilibili.com/video/BV1ZJ4m1L7ED/?vd_source=49ac986e62578cbc7593a58345567513

相关推荐
周胡杰12 分钟前
鸿蒙接入flutter环境变量配置windows-命令行或者手动配置-到项目的创建-运行demo项目
javascript·windows·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
LuckyLay1 小时前
React百日学习计划——Deepseek版
前端·学习·react.js
乌夷1 小时前
axios结合AbortController取消文件上传
开发语言·前端·javascript
程序猿阿伟3 小时前
《React Native与Flutter：社交应用中用户行为分析与埋点统计的深度剖析》
flutter·react native·react.js
wuyijysx3 小时前
JavaScript grammar
前端·javascript
学渣y5 小时前
React状态管理-对state进行保留和重置
javascript·react.js·ecmascript
_龙衣5 小时前
将 swagger 接口导入 apifox 查看及调试
前端·javascript·css·vue.js·css3
进取星辰6 小时前
25、Tailwind：魔法速记术——React 19 样式新思路
前端·react.js·前端框架
struggle20256 小时前
continue通过我们的开源 IDE 扩展和模型、规则、提示、文档和其他构建块中心，创建、共享和使用自定义 AI 代码助手
javascript·ide·python·typescript·开源
x-cmd7 小时前
[250512] Node.js 24 发布：ClangCL 构建，升级 V8 引擎、集成 npm 11
前端·javascript·windows·npm·node.js
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04DeepSeek各版本说明与优缺点分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09苍穹外卖面试总结10VMware虚拟机安装Win7专业版保姆级教程（附镜像包）