我目前正在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上做一个项目,我想要一个平面列表,当用户从列表中选择某个项目时,将弹出一个模态并显示与...相同的详细信息。
在这里
const handlePress = (press,meal_data) =>{
this.setState({show:press});
this.setState({selectedMeal:meal_data});
}
<TouchableOpacity onPress={()=>{handlePress(true,meal)}}>