React Native:如何在点击时全屏显示我的图像? [英] React Native: How to display my image in fullscreen when tapped on?

问题描述

所以我目前在屏幕上渲染了我的图像.我正在尝试实现一个功能，当我按下图像时，它会以全屏模式打开(在全屏模式下我将能够放大).

so i currently have my image rendered on the screen. I am trying to implement a feature where when i press on the image it opens in full screen (in full screen i will be able to zoom in).

我使用 react-native-expo-image-cache 最初在屏幕上加载图像并尝试使用 react-native-image-zoom-viewer实现了全屏功能，但没有用.

I am using react-native-expo-image-cache to initially load the image on the screen and tried using react-native-image-zoom-viewer to implement the full screen feature but it didnt work.

这是我的代码:

const IMAGES = [
  post.images[1] ? { url: post.images[1].url } : {}
];

const showSlider = () => {
  <Modal visible={true} transparent={true}>
    <ImageViewer imageUrls={IMAGES}/>
  </Modal>  
};

<TouchableOpacity
  onPress={showSlider}
>
  <Image
    uri={post.images[1].url}
    tint="light"
  />
</TouchableOpacity>

目前当我点击图像时没有任何反应.

currently when i tap on the image nothing happens.

推荐答案

试试这个方法

export default class Main extends Component {
  const IMAGES = [...];

  state = {
    modalVisible: false,
  };

  showSlider() {
    this.setState({ modalVisible: true });
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={() => this.showSlider()}>
          <Image uri={post.images[1].url} tint="light" />
        </TouchableOpacity>
        <Modal
          visible={this.state.modalVisible}
          transparent={true}
          onRequestClose={() => this.setState({ modalVisible: false })}
        >
          <ImageViewer imageUrls={IMAGES} />
        </Modal>
      </View>
    );
  }
}

这篇关于React Native:如何在点击时全屏显示我的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！