如何在本机反应中以横向模式打开图像

问题描述

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

解决方法

你可以这样做

Working Example

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,},});