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;
相关推荐
Cacciatore->5 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端6 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript