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;
相关推荐
三脚猫的喵4 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
炒毛豆4 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
Swift社区4 小时前
为什么 socket.io 客户端在浏览器能连上,但在 Node.js 中报错 transport close?
javascript·node.js
wordbaby4 小时前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴4 小时前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
Running_slave4 小时前
位运算左移右移应该怎么玩?
前端·javascript·算法
薄雾晚晴4 小时前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
秃顶老男孩.5 小时前
web中的循环遍历
开发语言·前端·javascript
快起来搬砖了5 小时前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
可子是我的小猫5 小时前
【JS】模块(一)
javascript