React Native录屏时如何隐藏指定UI组件？

你使用react-native-record-screen库时，要避免录屏时把播放、暂停、停止这类控制按钮录进去，最直接的方法是用状态变量控制按钮的显示和隐藏，配合库的录屏状态切换来实现，具体操作如下：

• 先定义一个状态变量（比如isRecording），默认设为false，用来标记当前是否在录屏
• 调用startRecording开始录屏的同时，把isRecording改成true，让控制按钮隐藏
• 当执行暂停（pauseRecording）或停止（stopRecording）操作时，再把isRecording改回false，让按钮重新显示

示例代码 #

import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import RecordScreen from 'react-native-record-screen';

export default function ScreenRecorderPage() {
  // 标记当前是否处于录屏状态
  const [isRecording, setIsRecording] = useState(false);

  // 开始录屏
  const handleStartRecord = async () => {
    try {
      await RecordScreen.startRecording({
        mic: true,
        bitrate: 6000000,
        fps: 30,
      });
      // 开始录屏后切换状态，隐藏按钮
      setIsRecording(true);
    } catch (err) {
      console.log('录屏启动失败:', err);
    }
  };

  // 暂停录屏
  const handlePauseRecord = async () => {
    await RecordScreen.pauseRecording();
    // 暂停后切换状态，显示按钮
    setIsRecording(false);
  };

  // 停止录屏
  const handleStopRecord = async () => {
    const videoResult = await RecordScreen.stopRecording();
    // 停止后切换状态，显示按钮
    setIsRecording(false);
    console.log('录屏视频路径:', videoResult.videoPath);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* 非录屏状态下显示开始按钮 */}
      {!isRecording && (
        <TouchableOpacity 
          onPress={handleStartRecord}
          style={{ padding: 12, backgroundColor: '#ff4444', borderRadius: 8 }}
        >
          <Text style={{ color: 'white', fontSize: 16 }}>开始录屏</Text>
        </TouchableOpacity>
      )}

      {/* 录屏状态下显示暂停/停止按钮（如果不需要录屏时显示任何控制，直接删掉这段即可） */}
      {isRecording && (
        <View style={{ flexDirection: 'row', gap: 16 }}>
          <TouchableOpacity 
            onPress={handlePauseRecord}
            style={{ padding: 12, backgroundColor: '#ffaa33', borderRadius: 8 }}
          >
            <Text style={{ color: 'white', fontSize: 16 }}>暂停</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            onPress={handleStopRecord}
            style={{ padding: 12, backgroundColor: '#00cc66', borderRadius: 8 }}
          >
            <Text style={{ color: 'white', fontSize: 16 }}>停止</Text>
          </TouchableOpacity>
        </View>
      )}

      {/* 这里放你的业务页面内容 */}
    </View>
  );
}

补充提示 #

如果想要录屏过程中完全看不到任何控制按钮，直接移除isRecording为true时的按钮渲染代码就行，这样录屏画面里只会有你的业务内容，不会包含控制组件。

内容的提问来源于stack exchange，提问作者Aabid Khan