React Native：如何在点击时全屏显示我的图像？

2ic8powd 于 2023-11-21 发布在 React

关注(0)|答案(1)|浏览(123)

所以我目前有我的图像渲染在屏幕上。我试图实现一个功能，当我按下图像，它打开全屏（在全屏我将能够放大）。
我使用react-native-expo-image-cache最初加载屏幕上的图像，并尝试使用react-native-image-zoom-viewer实现全屏功能，但它没有工作。
下面是我的代码：

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>

字符串
目前，当我点击图像什么也没有发生。

react-native

来源：https://stackoverflow.com/questions/65592831/react-native-how-to-display-my-image-in-fullscreen-when-tapped-on

1条答案

按热度按时间

new9mtju1#

尝试这种方式

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

字符串

赞(0）回复(0）举报 2023-11-21

我来回答

React Native：如何在点击时全屏显示我的图像？

1条答案

相关问题

热门标签

最新问答