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

Question

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

Answer 1

你可以这样做

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