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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86