我来帮你搞定这个问题！你的思路方向是对的，但有几个关键细节没处理到位，导致功能没生效。咱们一步步来修正：

1. 补全组件挂载时的自动隐藏逻辑 #

你定义了visibility函数，但没有在组件加载时触发它。我们可以用useEffect钩子来实现页面加载后自动执行隐藏逻辑：

useEffect(() => {
  visibility();
}, []); // 空依赖数组确保只在组件挂载时执行一次

2. 将状态传递给自定义Header组件 #

你的showHeader状态没有传递给HeaderHomeComponent，所以Header无法感知状态变化来控制显示/隐藏。这里提供两种实现方式：

方式一：父组件控制条件渲染 #

直接在父组件里根据showHeader状态决定是否渲染Header：

{showHeader && <HeaderHomeComponent />}

方式二：在Header组件内部处理显示逻辑 #

把showHeader作为props传入Header组件，让它自己处理显示逻辑：

// 父组件中
<HeaderHomeComponent showHeader={showHeader} />

// HeaderHomeComponent.js中
const HeaderHomeComponent = ({ showHeader }) => {
  return (
    showHeader && (
      <View style={styles.headerContainer}>
        {/* 你的Header内容，比如标题、操作按钮等 */}
      </View>
    )
  );
};

3. 添加手动显示Header的按钮 #

你还需要一个触发显示Header的按钮，可以放在页面底部（仅在Header隐藏时显示）：

{!showHeader && (
  <TouchableOpacity 
    style={styles.showHeaderBtn}
    onPress={() => setShowHeader(true)}
  >
    <Text style={styles.btnText}>显示Header</Text>
  </TouchableOpacity>
)}

完整修改后的父组件代码 #

import { useState, useEffect, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import RNCamera from 'react-native-camera';
import HeaderHomeComponent from './HeaderHomeComponent';

const HomeScreen = () => {
  const [showHeader, setShowHeader] = useState(true);
  const [isRecording, setIsRecording] = useState(false);
  const camera = useRef(null);
  const [cameraType, setCameraType] = useState(RNCamera.Constants.Type.back);
  const [flashMode, setFlashMode] = useState(RNCamera.Constants.FlashMode.off);

  const onRecord = async () => {
    if (isRecording) {
      camera.current?.stopRecording();
    } else {
      setTimeout(() => {
        if (isRecording) camera.current?.stopRecording();
      }, 23 * 1000);
      const data = await camera.current?.recordAsync();
      // 可在此处理录制完成后的视频数据
    }
  };

  const visibility = () => {
    setTimeout(() => setShowHeader(false), 2000);
  };

  // 组件挂载时触发自动隐藏逻辑
  useEffect(() => {
    visibility();
  }, []);

  return (
    <View style={styles.container}>
      <RNCamera 
        ref={camera} 
        type={cameraType} 
        flashMode={flashMode} 
        onRecordingStart={() => setIsRecording(true)} 
        onRecordingEnd={() => setIsRecording(false)} 
        style={styles.preview} 
      />
      {/* 条件渲染Header */}
      {showHeader && <HeaderHomeComponent />}
      {/* 显示Header的触发按钮 */}
      {!showHeader && (
        <TouchableOpacity 
          style={styles.showHeaderBtn}
          onPress={() => setShowHeader(true)}
        >
          <Text style={styles.btnText}>显示Header</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  showHeaderBtn: {
    position: 'absolute',
    bottom: 30,
    left: '50%',
    transform: [{ translateX: -50 }],
    backgroundColor: 'rgba(0,0,0,0.7)',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  btnText: {
    color: 'white',
    fontSize: 16,
  },
});

export default HomeScreen;

关键注意点 #

• 用useEffect确保页面加载后仅执行一次自动隐藏逻辑
• 状态showHeader必须与Header的渲染绑定，才能实现状态驱动的显示/隐藏
• 按钮的条件渲染避免在Header显示时重复出现
• 调用相机方法时加上可选链?.，防止空引用报错

内容的提问来源于stack exchange，提问作者Benjamin Ikwuagwu