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;