react-navigation：

news2024/11/22 15:32:55

我的仓库地址：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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1551347.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

水电站生态流量监测解决方案:亲历水电站生态监控改造

水电站生态流量监测解决方案:亲历水电站生态监控改造

​记得那是在2022年夏天,我所在的环保咨询公司接到了一项非常具有挑战性的监测项目。某省的环保部门要求对辖区内所有水电站的生态流量情况进行评估,并给出整改建议。作为项目负责人,我深知这项工作的重要意义。&#xff08;选自&#xff1a;智慧水务数字孪生安全监测解决方案提…
阅读更多...
武汉星起航公司助力零经验新手卖家征战亚马逊跨境电商市场

武汉星起航公司助力零经验新手卖家征战亚马逊跨境电商市场

在数字化浪潮的推动下&#xff0c;亚马逊跨境电商行业正逐渐成为众多创业者和企业家们的新战场。然而&#xff0c;对于零经验的新手卖家而言&#xff0c;这片广袤的电商海洋无疑充满了未知与挑战。在这个关键时刻&#xff0c;武汉星起航公司以其专业的服务和深厚的行业积累&…
阅读更多...
怎么做扫描二维码填写数据？用二维码收集用户反馈的方法

怎么做扫描二维码填写数据？用二维码收集用户反馈的方法

现在很多人都开始使用扫码填表的方式来收集用户反馈、签到登记、问卷调查等类型的用途&#xff0c;这种方式的使用不仅减少了制作者的成本压力&#xff0c;采用无纸化登记也提高了用户填写数据的便利性。只需要制作一个二维码&#xff0c;分享之后就可以让许多人同时扫码填写数…
阅读更多...
详解GPT模型的前世今生

详解GPT模型的前世今生

省流版&#xff1a; GPT模型是一种基于神经网络的自回归语言模型。该模型使用了一个称为“Transformer”的架构&#xff0c;从而有效避免了传统的循环神经网络产生的梯度消失问题。从第一代GPT到现在的GPT4&#xff0c;没带都产生了不同的变化&#xff0c;其性能也越来越强大。…
阅读更多...
【Java扫盲篇】String、String Buffer和String Builder的区别

【Java扫盲篇】String、String Buffer和String Builder的区别

你在面试时&#xff0c;面试官让你讲讲String String Buffer String Builder的区别&#xff0c;你是否能流畅的、完整的叙述出他们三者的区别? ✍先说结论 相同点&#xff1a; 他们的底层都是由char数组实现的。不同点&#xff1a; String对象一旦创建&#xff0c;是不能修…
阅读更多...
android安卓餐厅点餐课设

android安卓餐厅点餐课设

一、引言 随着移动互联网的快速发展&#xff0c;手机应用已经成为我们日常生活中不可或缺的一部分。餐饮行业也积极借助移动应用的力量&#xff0c;提供更便捷、高效的点餐服务。本文将介绍一个基于安卓系统开发的餐厅点餐APP的课程设计项目&#xff0c;探讨其设计理念、功能特…
阅读更多...
PostgreSQL数据库如何新建登录用户？

PostgreSQL数据库如何新建登录用户？

在PostgreSQL数据库中&#xff0c;如何创建新的登录用户呢&#xff1f; 默认情况&#xff0c;PostgreSQL数据库的默认用户是&#xff1a;postgres &#xff0c;如果我们需要创建一个新的低权限用户角色&#xff0c;应该如何操作&#xff1f;本章教程&#xff0c;简单介绍一下这…
阅读更多...
JavaFX的安装和使用

JavaFX的安装和使用

JavaFX的安装 安装可以参考&#xff1a;IDEA安装JavaFx_idea2019 javafx 下载安装-CSDN博客 JavaFX的使用 在JavaFX中&#xff0c;类的成员函数和操作本身被模式化作为在目标类中的类&#xff0c;而参数和返回值被表示为属性。代表目标对象的属性名是“this”。代表返回值的…
阅读更多...
【C++初阶】之类和对象（中）

【C++初阶】之类和对象（中）

【C初阶】之类和对象&#xff08;中&#xff09; ✍ 类的六个默认成员函数✍ 构造函数&#x1f3c4; 为什么需要构造函数&#x1f3c4; 默认构造函数&#x1f3c4; 为什么编译器能自动调用默认构造函数&#x1f3c4; 自己写的构造函数&#x1f3c4; 构造函数的特性 ✍ 拷贝构造…
阅读更多...
经纬恒润RTaW-Pegase：车载网络通信建模与时间特性分析工具

经纬恒润RTaW-Pegase：车载网络通信建模与时间特性分析工具

▎RTaW简介 RTaW-Pegase是由法国国家信息与自动化研究所&#xff08;INRIA&#xff09;旗下的RTaW公司开发的产品。它主要用于构建和优化汽车、航空航天以及工业领域的通信网络&#xff0c;包括时间敏感网络&#xff08;TSN&#xff09;、CAN&#xff08;FD&#xff0c;XL&…
阅读更多...
【系统架构师】-第12章-信息系统架构

【系统架构师】-第12章-信息系统架构

信息系统架构(ISA)是指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的活动。 为了更好地理解信息系统架构的定义&#xff0c; 特作如下说明: (1)架构是对系统的抽象&#xff0c;它通过描述元素、元素的外部可见属性及元素之间的关系来反映这种抽象。因此…
阅读更多...
【QT入门】 Qt代码创建布局之水平布局、竖直布局详解

【QT入门】 Qt代码创建布局之水平布局、竖直布局详解

往期回顾&#xff1a; 【QT入门】 Qt实现自定义信号-CSDN博客 【QT入门】 Qt自定义信号后跨线程发送信号-CSDN博客 【QT入门】 Qt内存管理机制详解-CSDN博客 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解 先看两个问题&#xff1a; 1、ui设计器设计界面很方便&#xf…
阅读更多...
PyQT5学习--新建窗体模板

PyQT5学习--新建窗体模板

目录 1 Dialog 2 Main Window 3 Widget Dialog 模板&#xff0c;基于 QDialog 类的窗体&#xff0c;具有一般对话框的特性&#xff0c;如可以模态显示、具有返回值等。 Main Window 模板&#xff0c;基于 QMainWindow 类的窗体&#xff0c;具有主窗口的特性&#xff0c;窗口…
阅读更多...
计算机网络基础——网络安全/ 网络通信介质

计算机网络基础——网络安全/ 网络通信介质

chapter3 网络安全与管理 1. 网络安全威胁 网络安全&#xff1a;目的就是要让网络入侵者进不了网络系统&#xff0c;及时强行攻入网络&#xff0c;也拿不走信息&#xff0c;改不了数据&#xff0c;看不懂信息。 事发后能审查追踪到破坏者&#xff0c;让破坏者跑不掉。 网络…
阅读更多...
Composer常见错误解决

Composer常见错误解决

Composer 是 PHP 开发中常用的依赖管理工具&#xff0c;但在使用过程中可能会遇到各种错误。以下是一些常见的 Composer 错误以及相应的解决方法&#xff0c;希望能帮助你更好地解决这些问题。 Memory exhausted 解决方法&#xff1a; 增加内存限制&#xff0c;可以通过在命令…
阅读更多...
基于随机森林与LSTM神经网络的住宅用电比较分析及预测 代码+论文 完整毕设

基于随机森林与LSTM神经网络的住宅用电比较分析及预测 代码+论文 完整毕设

摘要 本文旨在探讨基于随机森林&#xff08;Random Forest&#xff09;与长短期记忆神经网络&#xff08;Long Short-Term Memory, LSTM&#xff09;的住宅用电比较分析及预测方法。随机森林是一种集成学习方法&#xff0c;通过构建多个决策树进行预测&#xff0c;具有较强的鲁…
阅读更多...
掌握多线程之精髓：优雅地等待线程结果并继续后续操作

掌握多线程之精髓：优雅地等待线程结果并继续后续操作

在当今这个信息爆炸的时代&#xff0c;多线程编程已成为高效处理并发任务的重要工具。然而&#xff0c;如何在多线程编程中优雅地等待线程结果并继续后续操作&#xff0c;却是一个让人头疼的问题。今天&#xff0c;我们就来探讨如何使用Executors.newFixedThreadPool和executor…
阅读更多...
让IIS支持.NET Web Api PUT和DELETE请求

让IIS支持.NET Web Api PUT和DELETE请求

前言 有很长一段时间没有使用过IIS来托管应用了&#xff0c;今天用IIS来托管一个比较老的.NET Fx4.6的项目。发布到线上后居然一直调用不同本地却一直是正常的&#xff0c;关键是POST和GET请求都是正常的&#xff0c;只有PUT和DELETE请求是有问题的。经过一番思考忽然想起来了I…
阅读更多...
如何在群晖NAS中创建FTP公网地址实现远程上传下载本地文件

如何在群晖NAS中创建FTP公网地址实现远程上传下载本地文件

文章目录 1. 群晖安装Cpolar2. 创建FTP公网地址3. 开启群晖FTP服务4. 群晖FTP远程连接5. 固定FTP公网地址6. 固定FTP地址连接 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分…
阅读更多...
基于STELLA系统动态模拟技术及在农业、生态及环境科学中的应用教程

基于STELLA系统动态模拟技术及在农业、生态及环境科学中的应用教程

原文链接&#xff1a;基于STELLA系统动态模拟技术及在农业、生态及环境科学中的应用教程http://基于STELLA系统动态模拟技术及在农业、生态及环境科学中的应用教程 前言 STELLA是一种用户友好的计算机软件。通过绘画出一个系统的形象图形&#xff0c;并给这个系统提供数学公式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023