react-navigation：

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算机网络：物理层 - 信道极限容量

计算机网络：物理层 - 信道极限容量

计算机网络&#xff1a;物理层 - 信道极限容量 实际信道中的数字信号奈式准则香农公式练习 实际信道中的数字信号 信号在传输过程中会受到各种因素的影响&#xff0c;如图所示&#xff1a; 这是一个数字信号&#xff0c;当它通过实际的信道后&#xff0c;波形会产生失真&#…
阅读更多...
【论文阅读】FlipCAM：高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法

【论文阅读】FlipCAM：高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法

【论文阅读】FlipCAM&#xff1a;高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法 文章目录 【论文阅读】FlipCAM&#xff1a;高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法一、介绍二、方法2.1 准备2.2 一致性的架构2.3 SAM模块2.4 建筑提取模式 三、实验结果…
阅读更多...
RISC-V特权架构 - 中断定义

RISC-V特权架构 - 中断定义

RISC-V特权架构 - 中断定义 1 中断类型1.1 外部中断1.2 计时器中断1.3 软件中断1.4 调试中断 2 中断屏蔽3 中断等待4 中断优先级与仲裁5 中断嵌套6 异常相关寄存器 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 中断类型 RISC-V 架构定义的中…
阅读更多...
力扣热门算法题 135. 分发糖果，146. LRU 缓存，148. 排序链表

力扣热门算法题 135. 分发糖果，146. LRU 缓存，148. 排序链表

135. 分发糖果&#xff0c;146. LRU 缓存&#xff0c;148. 排序链表&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.28 可通过leetcode所有测试用例。 目录 135. 分发糖果 解题思路 完整代码 Python Java 146. LRU 缓存 …
阅读更多...
图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

电动两轮车不仅为当今生活提供了便利&#xff0c;更是一种健康和绿色的出行方式。想象一下&#xff0c;在经过一整晚的充分休息&#xff0c;骑上爱车&#xff0c;满血复活的准备开始新的一天。您会愿意带着如何给心爱的两轮车充电的担心开始这一天吗&#xff1f; 随着越来越…
阅读更多...
Vue 04 Vue 中的 Ajax、slot 插槽

Vue 04 Vue 中的 Ajax、slot 插槽

Vue学习 Vue 0401 Vue中的Ajax服务器准备axios使用跨域问题解决Vue-CLI 配置代理1Vue-CLI 配置代理2案例: 用户搜索vue-resource 02 slot插槽默认插槽具名插槽作用域插槽slot总结 Vue 04 B站 Vue全家桶&#xff08;BV1Zy4y1K7SH&#xff09; 学习笔记 Vue 中的 ajax 01 Vue中的…
阅读更多...
jmeter总结之：Regular Expression Extractor元件

jmeter总结之：Regular Expression Extractor元件

Regular Expression Extractor是一个后处理器元件&#xff0c;使用正则从服务器的响应中提取数据&#xff0c;并将这些数据保存到JMeter变量中&#xff0c;以便在后续的请求或断言中使用。在处理动态数据或验证响应中的特定信息时很有用。 添加Regular Expression Extractor元…
阅读更多...
Docker进阶：使用Docker部署Harbor私有镜像仓库

Docker进阶：使用Docker部署Harbor私有镜像仓库

Docker进阶&#xff1a;使用Docker部署Harbor私有镜像仓库 1、安装Docker和Docker Compose1、安装Docker、Docker Compose2、验证Docker和Docker Compose是否成功安装3、先启动运行docker服务 2、下载并配置Harbor1、下载最新版本的Harbor离线安装包2、配置Harbor的主机名和管理…
阅读更多...
DDos系列攻击原理与防御原理

DDos系列攻击原理与防御原理

七层防御体系 静态过滤 命中黑名单 对确定是攻击的流量直接加入黑名单&#xff08;源地址命中黑名单直接丢弃&#xff0c;缺乏机动性和扩展性&#xff09; 畸形报文过滤 畸形报文攻击 TCP包含多个标记位&#xff0c;排列组合有规律 • 现象&#xff1a;TCP标记位全为1 …
阅读更多...
基于SpringBoot和Vue的在线视频教育平台的设计与实现

基于SpringBoot和Vue的在线视频教育平台的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的在线视频教育平台的设计与实现 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&…
阅读更多...
IDEA一键备份MySQL数据库（mysqldump版）

IDEA一键备份MySQL数据库（mysqldump版）

问题 又到了搬MySQL数据库的时刻&#xff0c;这次我不想使用命令行备份&#xff0c;这次我想使用IDEA一键备份MySQL数据库。 解决 假设安装好mysqldump命令后&#xff0c;让IDEA使用mysqldump一键备份指定的数据库。具体IDEA配置如下&#xff1a; 这是IDEA上面的数据库到处…
阅读更多...
element-ui 自定义点击图标/文本/按钮触发el-date-picker时间组件，不使用插槽

element-ui 自定义点击图标/文本/按钮触发el-date-picker时间组件，不使用插槽

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1. 图片预览 2.上代码 2.1html <el-button class"hide_input" size"small"><svg t"1711608996149" class"icon" viewBox"0 0 1024 1024" version"1.1"…
阅读更多...
腾讯云4核8G服务器价格，12M带宽一年646元，送3个月

腾讯云4核8G服务器价格，12M带宽一年646元，送3个月

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…
阅读更多...
基于ssm的线上旅行信息管理系统论文

基于ssm的线上旅行信息管理系统论文

摘 要 随着旅游业的迅速发展&#xff0c;传统的旅行信息查询管理方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;特开发了本线上旅行信息管理系统。 本论文首先对线上旅行信息管理系统进行需求分析&#xff0c;从系…
阅读更多...
MTransE阅读笔记

MTransE阅读笔记

Multilingual Knowledge Graph Embeddings for Cross-lingual Knowledge Alignment 用于交叉知识对齐的多语言知识图谱嵌入(MTransE) Abstract 最近的许多工作已经证明了知识图谱嵌入在完成单语知识图谱方面的好处。由于相关的知识库是用几种不同的语言构建的&#xff0c;因…
阅读更多...
设计模式（一）简介

设计模式（一）简介

一、书籍推荐及博客 大话设计模式 设计模式的艺术 XXL开源社区 | 博客 二、通俗版概念 创建型模式、结构型模式、行为型模式 怎么建房子、建什么样的房子、建的房子有什么用 三、重点模式及简述 1、创建型模式 工厂方法&#xff08;多态工厂的实现&#xff09; 抽象工厂…
阅读更多...
c++|string模拟实现

c++|string模拟实现

目录 一、string.h 二、string.cpp 三、Test.cpp 对string的各种接口进行一个简易版的模拟实现&#xff0c;在模拟实现完之后对string的底层实现有了进一步的理解&#xff0c;了解大佬的编程写法思路。也算是对string有了一个小总结。 一、string.h 接口的声明。放在.h文件中…
阅读更多...
面向对象的学习

面向对象的学习

封装 //用来描述一类事物的类&#xff0c;专业叫做&#xff1a;javabean类 //在javabean类是不写main方法的//一个java文件中可以定义多个类&#xff0c;且只能一个类是public修饰&#xff0c;而且public修饰的类名必须成为代码的文件名 ://在类中一般无需指定初始化值 存在默…
阅读更多...
C# OpenCvSharp 轮廓检测

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…
阅读更多...
理解JVM：从字节码到程序运行

理解JVM：从字节码到程序运行

大家好&#xff0c;我是程序员大猩猩。 今天我们来讲一下JVM&#xff0c;好多面试者在面试的时候&#xff0c;都会被问及JVM相关知识。那么JVM到底是什么&#xff0c;要理解它到底是出于什么原因&#xff1f; JVM俗称Java虚拟机&#xff0c;它是一个抽象的计算机&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023