Android 如何在react native中以横向模式打开图像

我的整个应用程序都处于纵向模式，但当我双击图像/缩略图时，我希望在横向模式下打开图片，并在图像关闭时自动返回纵向模式。如果您已经发布了类似的解决方案，我将非常感谢您的帮助或参考。

您可以这样做

import*as React from'React'；
进口{
文本，
看法
样式表，
形象,，
尺寸，
按钮
情态动词
}从“反应本机”；
从“expo常量”导入常量；
从“世博会屏幕方向”导入*作为屏幕方向；
让img=
'https://www.highgroundgaming.com/wp-content/uploads/2020/06/Valorant-Maps-Guide.jpg';
导出默认函数App（）{
const[visible，setVisible]=React.useState（false）；
函数ChangeToLandscape（）{
ScreenOrientation.lockAsync（ScreenOrientation.OrientationLock.横向）；
setVisible（真）；
}
函数ChangeToPortrait（）{
ScreenOrientation.lockAsync（ScreenOrientation.OrientationLock.Grait）；
setVisible（假）；
}
返回(
{visible===false(
ChangeToLandscape（）}/>
) : (
ChangeToPortrait（）}/>
)}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
});

您可以使用

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  Button,
  Modal,
} from 'react-native';
import Constants from 'expo-constants';
import * as ScreenOrientation from 'expo-screen-orientation';

let img =
  'https://www.highgroundgaming.com/wp-content/uploads/2020/06/Valorant-Maps-Guide.jpg';

export default function App() {
  const [visible, setVisible] = React.useState(false);

  function ChangeToLandscape() {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    setVisible(true);
  }

  function ChangeToPortrait() {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    setVisible(false);
  }

  return (
    <View style={styles.container}>
      {visible === false ? (
        <>
          <Image
            source={{ uri: img }}
            style={{ width: '100%', height: 300 }}
            resizeMode="contain"
          />
          <Button title="Show Full" onPress={() => ChangeToLandscape()} />
        </>
      ) : (
        <Modal animationType="slide" transparent={true} visible={true}>
          <View>
            <Image
              source={{ uri: img }}
              style={{ width: '100%', height: 300 }}
              resizeMode="contain"
            />
          </View>
          <Button title="Close" onPress={() => ChangeToPortrait()} />
        </Modal>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});