React-Native：签名组件挂载后屏幕方向锁定问题求助

嘿，这个问题我之前踩过坑——react-native-signature-capture组件在设置viewMode后，会直接锁定系统的屏幕方向，而且组件卸载时完全不会自动恢复自动旋转功能。下面是我亲测有效的解决办法，核心思路就是在组件卸载时主动重置屏幕方向权限：

1. 引入屏幕方向控制库 #

我们需要借助react-native-orientation-locker这个第三方库来灵活控制和恢复屏幕方向（RN官方的方向API功能有限，这个库更适配场景）。先安装依赖：

npm install react-native-orientation-locker --save
# RN 0.60+版本无需手动link，自动完成配置

2. 在你的签名组件中添加清理逻辑 #

根据你使用的是类组件还是函数组件，分别处理：

类组件写法 #

import React, { Component } from 'react';
import RNSignatureCapture from 'react-native-signature-capture';
import Orientation from 'react-native-orientation-locker';

class SignatureScreen extends Component {
  state = {
    landscapeMode: false
  };

  componentDidMount() {
    // 组件挂载时，根据state锁定对应方向
    const { landscapeMode } = this.state;
    if (landscapeMode) {
      Orientation.lockToLandscape();
    } else {
      Orientation.lockToPortrait();
    }
  }

  componentWillUnmount() {
    // 关键：组件卸载时解锁所有方向，恢复自动旋转
    Orientation.unlockAllOrientations();
  }

  onSignatureSave = (result) => {
    // 你的签名保存逻辑
  };

  render() {
    const { landscapeMode } = this.state;
    return (
      <RNSignatureCapture
        onSaveEvent={this.onSignatureSave}
        saveImageFileInExtStorage={false}
        showNativeButtons={false}
        // 这里可以保留viewMode，但建议和手动锁定的方向保持一致，避免冲突
        viewMode={landscapeMode ? "landscape" : "portrait"}
      />
    );
  }
}

export default SignatureScreen;

函数组件写法 #

import React, { useState, useEffect } from 'react';
import RNSignatureCapture from 'react-native-signature-capture';
import Orientation from 'react-native-orientation-locker';

const SignatureScreen = () => {
  const [landscapeMode, setLandscapeMode] = useState(false);

  useEffect(() => {
    // 挂载时锁定指定方向
    if (landscapeMode) {
      Orientation.lockToLandscape();
    } else {
      Orientation.lockToPortrait();
    }

    // 清理函数：组件卸载时恢复自动旋转
    return () => {
      Orientation.unlockAllOrientations();
    };
  }, [landscapeMode]);

  const onSignatureSave = (result) => {
    // 你的签名保存逻辑
  };

  return (
    <RNSignatureCapture
      onSaveEvent={onSignatureSave}
      saveImageFileInExtStorage={false}
      showNativeButtons={false}
      viewMode={landscapeMode ? "landscape" : "portrait"}
    />
  );
};

export default SignatureScreen;

3. 额外注意事项 #

• 确保组件是真的被卸载（比如从导航栈中完全移除），而不是仅仅隐藏（比如用display: none）——只有卸载时，清理逻辑才会触发。
• 如果不想依赖第三方库，也可以写原生模块：
  • iOS端：在原生代码中调用[[UIDevice currentDevice] setValue:@(UIDeviceOrientationAllButUpsideDown) forKey:@"orientation"];来恢复自动旋转。
  • Android端：在Activity中调用setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);。不过第三方库已经封装好了，没必要重复造轮子。

这个方法的核心就是补全组件缺失的清理逻辑，主动把屏幕方向权限交还给系统，这样卸载组件后设备就能恢复自动旋转了。

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