将选择的项目从平面列表获取到React native

问题描述 投票:0回答:1

我目前正在React Native Expo上做一个项目,我希望有一个平面列表,当用户从列表中选择某个项目时,将弹出一个模态,并显示与模态列表相同的详细信息。我无法将准确选择的商品添加到模式]

import React,{ Component}from 'react';
import {View,Text,Image,StyleSheet,Modal,Button} from 'react-native';
import { FlatList, TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import Card from '../shared/card';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';

export default class MealSearch extends Component{

    constructor(props){
        super(props)

        this.state = {
            loaded:false,
            show:false,       
           }}

    render(){
       const meal= [ {title:'My hero Academia',img:{uri:'https://i.cdn.turner.com/adultswim/big/img/2018/05/10/MHA_Header.png'}, body:'Rating : 4.5/5' , id :'1'},
        {title:'Naruto',img:{uri:'https://store-images.s-microsoft.com/image/apps.15041.71343510227343465.377174a9-abc8-4da3-aaa6-8874fdb9e2f5.00fc0a9e-295e-40ca-a391-58ed9f83e9a0?mode=scale&q=90&h=1080&w=1920&background=%23FFFFFF'}, body:'Rating : 5/5' , id :'2'},
        {title:'Attack On Titan',img:{uri:'https://www.denofgeek.com/wp-content/uploads/2013/12/attack-on-titan-main.jpg?fit=640%2C380'}, body:'Rating : 4.5/5' , id :'3'},
        {title:'Fate: Unlimited Blade Works',img:{uri:'https://derf9v1xhwwx1.cloudfront.net/image/upload/c_fill,q_60,h_750,w_1920/oth/FunimationStoreFront/2066564/Japanese/2066564_Japanese_ShowDetailHeaderDesktop_496a6d81-27db-e911-82a8-dd291e252010.jpg'}, body:'Rating : 4.5/5' , id :'4'}
    ]

    const pressHandler = (id) => {
        console.log(id);

    }                        
        return(
            <View style={styles.view} >
            <FlatList
                keyExtractor={item => item.id}
                data={meal}
                renderItem={({item})=>(
                    <Card>
                        <TouchableOpacity onPress={()=>{this.setState({show:true}),(item.id)}}>                           
                            <View style={styles.mealItem}>                 
                                <Image style={{width:300,height:150}} resizeMode={'contain'} source={item.img} marginLeft={30}/>
                                <View style={styles.descrip}>
                                    <Text style={styles.rating}>{item.title}</Text>
                                    <Text style={styles.name}>{item.body}</Text>
                                </View>
                            </View>
                        </TouchableOpacity>                        
                    </Card>


                )}
            />

            <Modal
                transparent={true}
                visible={this.state.show}
               >
                <View style={styles.modal}>
                    <View style={styles.inModal}> 
                    <FlatList
                        data={[{key:(item.id)}]}
                        renderItem={({item})=>(
                            <View style={styles.mealItem}>                 

                            <View style={styles.descrip}>
                                <Text style={styles.rating}>{item.title}</Text>
                                <Text style={styles.name}>{item.body}</Text>
                            </View>
                        </View>
                        )}
                    />    
                    <Button title='End' onPress={()=>{this.setState({show:false})}}/>
                    </View> 
                </View>

            </Modal>





            </View>
        );}

}

const styles =StyleSheet.create({
    view:{
        backgroundColor:'white',


    },
    modal:{
        backgroundColor:'#000000aa',
        flex:1 
    },
    inModal:{
        backgroundColor:'#ffffff',
        margin:50,
        padding:40,
        borderRadius:7
    },
    mealItem:{
        marginTop:10,
        marginBottom:10,
        flexDirection:'column',
        flexWrap:'wrap'

    },
    descrip:{
        flexDirection:'column',
        padding:5,
    },
    name:{
        marginTop:15,
        fontWeight:'bold',
        fontSize:17,
        paddingLeft:10

    },
    rating:{
        fontFamily:'patuaone',
        fontSize:20,    

    }
})

我只制作了模态,什么也没插入

import React from 'react';
import {StyleSheet,View} from 'react-native';
import { Overlay } from 'react-native-elements';



export default function card(props){
    return(
        <View style={styles.card}>
                    <View style={styles.cardContent}>
                        {props.children}
                    </View>
                 </View>

    );
}
const styles = StyleSheet.create({

    card:{
        borderRadius:3,
        elevation:3,
        backgroundColor:'#fff',
        shadowOffset:{width:1,height:1},
        shadowColor:'#333',
        shadowOpacity:0.3,
        shadowRadius:2,
        marginHorizontal:4,
        marginVertical:6
    },
    cardContent:{
        flexWrap:'wrap' 
    }  
});

以上是用于制作卡片,并且我已将清单中的项目插入到这些卡片中

请希望我能得到一个好的答案!!!

我目前正在React Native Expo上做一个项目,我想要一个平面列表,当用户从列表中选择某个项目时,将弹出一个模态并显示与...相同的详细信息。

javascript react-native react-native-android react-native-flatlist
1个回答
0
投票

在这里

const handlePress = (press,meal_data) =>{
  this.setState({show:press});
  this.setState({selectedMeal:meal_data});
}


<TouchableOpacity onPress={()=>{handlePress(true,meal)}}>
© www.soinside.com 2019 - 2024. All rights reserved.