@Aleksandr232

Как передать данные в модальное окно react native?

import React,{useCallback, useState} from "react";
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
  ScrollView,
  Image,
  TouchableOpacity,
  Modal,
  ImageBackground,
  Button
} from "react-native";
import { Rating, AirbnbRating } from "react-native-ratings";
import  POST  from "./POST";

const Data = () => {
  const [post, setPost]=useState(POST)
  const [isRender, setIsRender] = useState(true)
  const [isModalVisible, setisModalVisible]=useState(false)
  const keyExtractor = useCallback(item => item.id.toString())
  const Item = ({ title, img, author }) => (
    <TouchableOpacity onPress={()=>onPressItem(Item)}>
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.author}>{author}</Text>
      <Image
        style={{ left: 4, width: 71, height: 107, bottom: '55%',  }}
        source={img}
      />
      <View style={styles.rating}>
        <Rating count={5} defaultRating={4} imageSize={16} />
      </View>
    </View>
    </TouchableOpacity>
  );

  const renderItem = useCallback(({ item }) => (
    <Item title={item.title} img={item.img} author={item.author} />
  ));

  const onPressItem=(item)=>{
    setisModalVisible(true)
  }

  const onPressNoItem=(item)=>{
    setisModalVisible(false)
  }

  const Modals=({title, img, author})=>(
    <View style={styles.container1}>
    <ImageBackground source={require('./img/el4.png')}  style={styles.img} >
      <Text style={styles.text}>Книга</Text>
      <View style={{flex:1, top:140, left:50}}>
          <TouchableOpacity onPress={()=>onPressNoItem(Item)}>
              <Image source={require('./img/strel.png')}/>
          </TouchableOpacity>
      </View>
    </ImageBackground>
        <Text style={styles.textModal}>{title}</Text>
        <Text style={styles.author}>{author}</Text>
  </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={post}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        extraData={isRender}
      />
      <Modal
        animationType="fade"
        visible={isModalVisible}
        onRequestClose={()=>setisModalVisible(false)}
        presentationStyle='fullScreen'
        
      >
            <Modals/>
      </Modal>
    </SafeAreaView>
  );
};
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы