react-native - 在 React Native 中，模态不会旋转到横向屏幕？

Question

Modal我在旋转到横向屏幕时遇到问题。我试图弄清楚我做错了什么，当我第一次打开模态时，模态会旋转，但是如果我再次尝试打开它并旋转手机，模态不会旋转。我创建了两个函数unlockScreenToDefault和lockScreenToPortraitOrientation：

const lockScreenToPortraitOrientation = async () => {
  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
};

const unlockScreenToDefault = async () => {
  await ScreenOrientation.unlockAsync();
};

我有这样的代码：

模态组件

export default class ModalPhoto extends Component {

  componentDidMount() {
    unlockScreenToDefault().then();
  }

  componentWillUnmount() {
    lockScreenToPortraitOrientation().then();
  }

  render() {
    const {
      visible,
      onClose,
      source,
      type,
    } = this.props;

    return (
      <Modal
        animationType="fade"
        visible={visible}
        transparent
        onRequestClose={() => {
          console.log('Modal has been closed.');
        }}
        supportedOrientations={
          [
            'portrait',
            'portrait-upside-down',
            'landscape',
            'landscape-left',
            'landscape-right'
          ]
        }
      >
        <View style={styles.modalContainer}>
          <ImageViewer
            imageUrls={[{
              height,
              width,
              props: {
                source
              }
            }]}
          />
          <TouchableOpacity
            style={styles.back}
            onPress={() => {
              lockScreenToPortraitOrientation().then(() => onClose());
            }}
          >
            <Text style={styles.label}>{Translations.translate('Back')}</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    );
  }
}

我在我的代码中使用该Modal组件，如下所示：

pictures.map(picInfo => (
  <View key={picInfo.uri}>
                  { country !== 'US' && (
                    <View>
                      <TouchableOpacity
                        onPress={() => {
                          this.setState(oldState => ({
                            modalPictureVisible: !oldState.modalPictureVisible,
                            modalUri: picInfo.uri
                          }));
                        }}
                      >
                        <Image key={picInfo.uri} style={styles.setPicture} source={{ uri: picInfo.uri }} />
                      </TouchableOpacity>
                      <ModalPhoto
                        visible={modalPictureVisible}
                        source={{ uri: modalUri }}
                        onClose={() => this.setState({ modalPictureVisible: false, modalUri: '' })}
                      />
                    </View>
                  )}
  </View>
));

标签： react-nativescreen-orientation