React native как открыть фото на весь экран по нажатию?

Question

[Alhmuo]

как открыть фото на весь экран по нажатию? пытался как то получить key изображения и всё уже перепробовал но никак не могу понять

хочу чтобы по нажатию открывался модуль с изображением по которому нажали на весь экран

https://codesandbox.io/s/funny-darkness-5hkkx?file...

// App.js

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Button, FlatList, Image, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { PhotoList } from './app/components/PhotoList';

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const [modal, setModal] = useState(true)

  useEffect(() => {
    fetch('https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.log(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      <PhotoList data={data} />
    </>
  );
};

const styles = StyleSheet.create({

})

//PhotoList.js

import React, { useState } from 'react';
import { Button, FlatList, Image, Modal, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';

function PhotoList({ data, onPress }) {

  const [openModal, setOpenModal] = useState(false)

  const renderItem = ({ item }) => (
    <TouchableWithoutFeedback onPress={() => { setOpenModal(true) }}>
      <View style={styles.renderItem} key={item.urls.regular}>
        <Image style={styles.img} source={{ uri: item.urls.regular }} />
        <Text>By {item.user.username}</Text>
      </View>
    </TouchableWithoutFeedback>
  )

  return (
    <>
        <View>
          <FlatList numColumns={2}
            data={data}
            renderItem={renderItem}
          />
        </View>

      <Modal visible={openModal}>
        <Button onPress={() => { setOpenModal(false) }} title='X' />
        <Text>Hello</Text>
      </Modal>
    </>
  );
};

const styles = StyleSheet.create({
  img: {
    width: 190,
    height: 250,
    flex: 1,
  },
  renderItem: {
    alignItems: 'center',
    marginLeft: 'auto',
    marginEnd: 'auto',
    marginBottom: 30,
  },
})

export { PhotoList };

Answer 1

[Kirill Makarov]

Сегодня уже в чате отвечал на этот вопрос, создай state, а в return вместо модалки View с flex:1, внутри естественно картинка. И в зависимости от state отслеживай и рендерь либо первый view с flatlist либо второй с квртинкой