react native中使用@react-navigation/native进行自定义头部

react native中使用@react-navigation/native进行自定义头部

效果示例图

实例代码

复制代码
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/no-unstable-nested-components */
import React, { useLayoutEffect } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { pxToPd } from '../../common/js/device';

const TestNavigation = ({}) => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: {
        backgroundColor: '#fff', // 设置头部背景颜色
      },
      headerTintColor: '#fff', // 设置头部文字和按钮颜色
      headerTitleStyle: {
        fontWeight: 'bold', // 设置头部标题的样式
      },
      headerBackVisible: false, // 隐藏返回按钮
      headerShadowVisible: false, // 隐藏头部阴影
      headerLeft: () => {
        return (
          <>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderColor: 'red',
                borderStyle: 'solid',
              }}
              onPress={() => navigation.goBack()}>
              <Image
                style={{ width: pxToPd(50), height: pxToPd(50) }}
                source={require('../../common/images/back.png')}
              />
            </TouchableOpacity>
          </>
        );
      },
      headerTitle: () => {
        return (
          <>
            <View
              style={{
                borderWidth: 1,
                borderColor: 'red',
                borderStyle: 'solid',
                width: pxToPd(400),
                height: pxToPd(50),
              }}>
              <Text>自定义头部</Text>
            </View>
          </>
        );
      },
      headerRight: () => {
        return (
          <>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderColor: 'red',
                borderStyle: 'solid',
              }}>
              <Image
                style={{ width: pxToPd(50), height: pxToPd(50) }}
                source={require('../../common/images/share.png')}
              />
            </TouchableOpacity>
          </>
        );
      },
    });
  }, [navigation]);

  return (
    <>
      <View>
        <Text>自定义头部</Text>
      </View>
    </>
  );
};

export default TestNavigation;
相关推荐
Hilaku11 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
LL.。23 分钟前
同步回调和异步回调
开发语言·前端·javascript
Mintopia1 小时前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
来碗疙瘩汤1 小时前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真1 小时前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying1 小时前
vite学习笔记
前端·javascript
LRH1 小时前
JS基础 - 手写数组扁平化函数
前端·javascript
FogLetter1 小时前
从零到一实现流式输出:SSE技术在前端应用中的魔法时刻
前端·javascript
G等你下课1 小时前
如何进行DOM操作?
javascript·html