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 (<><TouchableOpacitystyle={{borderWidth: 1,borderColor: 'red',borderStyle: 'solid',}}onPress={() => navigation.goBack()}><Imagestyle={{ width: pxToPd(50), height: pxToPd(50) }}source={require('../../common/images/back.png')}/></TouchableOpacity></>);},headerTitle: () => {return (<><Viewstyle={{borderWidth: 1,borderColor: 'red',borderStyle: 'solid',width: pxToPd(400),height: pxToPd(50),}}><Text>自定义头部</Text></View></>);},headerRight: () => {return (<><TouchableOpacitystyle={{borderWidth: 1,borderColor: 'red',borderStyle: 'solid',}}><Imagestyle={{ width: pxToPd(50), height: pxToPd(50) }}source={require('../../common/images/share.png')}/></TouchableOpacity></>);},});}, [navigation]);return (<><View><Text>自定义头部</Text></View></>);
};export default TestNavigation;