【发布时间】：2022-07-25 18:01:21
【问题描述】：
HomesScreen.js 这是我渲染平面列表元素的地方
import { StatusBar } from 'expo-status-bar';
import { Button, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {FontAwesome} from "@expo/vector-icons"
import { TextInput } from 'react-native-gesture-handler';
import TopHeading from './home_components/TopHeading';
import TopSlider from './home_components/TopSlider';
import { FlatList } from 'react-native';
import Cupons from './home_components/Cupons';
import { useState } from 'react';
import React,{ Component } from 'react';
import { FastField } from 'formik';
export default function HomeScreen () {
const [dataa= [], setData] = useState();
fetch('https://newsapi.org/v2/everything?q=Pakistan&from=2022-06-26&sortBy=publishedAt&apiKey=******************')
.then(response => response.json())
.then((data => {
setData(data.articles)
}))
const common = [
{
name: "Test-1",
url: require("../assets/image.jpg")
},
{
name: "Test-2",
url: require("../assets/image.jpg")
},
{
name: "Test-3",
url: require("../assets/image.jpg")
},
{
name: "Test-4",
url: require("../assets/image.jpg")
},
{
name: "Test-5",
url: require("../assets/image.jpg")
},
]
const cupon= [
{
url: require("../assets/image2.jpg"),
head: "Dabdob",
desc: "Offer: 10%",
},
{
url: require("../assets/image2.jpg"),
head: "Noon",
desc: "Offer: cashback 10%",
},
{
url: require("../assets/image2.jpg"),
head: "Deraah",
desc: "Offer: Free Shipping",
},
{
url: require("../assets/image2.jpg"),
head: "Al-Qassim Health Water",
desc: "Offer: 11%",
},
{
url: require("../assets/image2.jpg"),
head: "Danube",
desc: "( SR 10 (3 times use",
},
{
url: require("../assets/image2.jpg"),
head: "Styli Shop",
desc: "Offer: 10%",
},
{
url: require("../assets/image2.jpg"),
head: "Naseem",
desc: "Offer: 15%-10%",
},
{
url: require("../assets/image2.jpg"),
head: "Shgardi",
desc: "Offer: 25%",
},
{
url: require("../assets/image2.jpg"),
head: "Click Toys",
desc: "Offer: 10%",
},
{
url: require("../assets/image2.jpg"),
head: "Nanaa",
desc: "Offer: 50% cash back",
},
]
const navigation = useNavigation();
const [isModalVisible, setIsModalVisible] = useState(false)
const handleModal = () => setIsModalVisible(() => !isModalVisible);
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.innerContainer}>
<Image style={styles.logo} source={require("../assets/mainLogo.png")} />
<View style={styles.searchbarContainer}>
<FontAwesome
color={"orange"}
style={{marginTop:12, paddingLeft:5}}
size={15}
name='search' />
<TextInput
style={styles.searchBar}
placeholder='Search..'/>
</View>
</View>
</View>
<View style={{alignSelf: "stretch", borderColor: "red", height:160, justifyContent:"space-between", alignItems: "center",marginHorizontal:20 }}>
<TopHeading />
<FlatList
showsHorizontalScrollIndicator={false}
bounces
data={common}
renderItem = {({item, index})=>{
return <TopSlider heading= {item.name} img={item.url} index={index} />
}
}
horizontal />
</View>
<View style={{flex: 1, marginBottom: 95,marginHorizontal: 0}}>
<FlatList
showsVerticalScrollIndicator={false}
data={dataa}
renderItem = {({item})=>{
return <Cupons imgUrl={item.urlToImage} name={item.author} title={item.title} desc={item.description} content={item.content} />
}
}
/>
</View>
<StatusBar style={'auto'} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
alignItems: "center"
},
header:{
borderWidth: 1,
height: 130,
backgroundColor: "rgb(32, 68, 124)",
alignSelf: "stretch",
alignItems: 'center',
},
logo:{
width: 40,
height: 40,
tintColor: "white",
},
innerContainer:{
flexDirection: "row",
marginTop: 70,
alignSelf: "stretch",
justifyContent: "space-between",
marginHorizontal: 20,
alignItems: "center",
height: 50,
},
searchbarContainer:{
flexDirection: "row",
backgroundColor: "white",
borderRadius: 20,
width: 300,
height: 40,
},
searchBar:{
paddingLeft: 5,
width: 280,
}
});
Cupons.js 当按下此屏幕的某个元素时，弹出窗口应打开该元素的详细信息 从'expo-status-bar'导入{状态栏}； 从 'react-native' 导入 { Button, Image, StyleSheet, Text, TouchableOpacity, View }; 从“@react-navigation/native”导入 { useNavigation }； 从'react-native-paper'导入{模态}； 从“反应”导入 { useState }； 从'../CuponDetail'导入CuponDetails；
export default function Cupons({imgUrl, name, desc, title, content}) {
const navigation = useNavigation();
const [isModalVisible, setIsModalVisible] = useState(false)
const handleModal = () => setIsModalVisible(() => !isModalVisible);
return (
<View >
<TouchableOpacity onPress= {()=>{ navigation.navigate("CuponDetails", {
ImgUrl : imgUrl,
Name : name,
Desc : desc,
Title: title,
Content: content,
})
console.log("Cupon", imgUrl)
}}
>
<View style= {styles.container}>
<View style={styles.topContainer}>
<View stytle= {styles.imageContainer}><Image resizeMode='cover' style={styles.image} source={{uri: `${imgUrl}`}}/></View>
<View style={styles.textContainer}><Text style={{fontWeight: "bold", fontSize: 16}} >{name}</Text><Text style={{fontSize:16, color: "grey", overflow: "hidden", padding:5}}>{title}</Text></View>
</View>
<Text style={{alignSelf: "center", fontSize:20, fontWeight: "bold"}}>Description</Text>
<Text
style={{marginHorizontal:10,
marginVertical:10,
height: "auto",
overflow: "scroll",
fontSize: 20,
padding:5,
borderBottomWidth:0,
borderTopWidth:0,
fontSize:14,
color: "grey",
alignItems:"center",
justifyContent: "center" }}>{desc}</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "rgb(250,250,250)",
height: "auto",
margin: 10,
width: 350,
borderRadius: 10,
elevation: 5,
shadowColor: "rgb(100,100,255,)",
position: "relative",
overflow: "hidden",
justifyContent: "center",
},
topContainer:{
margin: 10,
alignItems: "center",
width: "auto",
height: "auto",
justifyContent: "center",
},
imageContainer:{
borderRadius: 10,
height: 60,
width:80,
elevation: 10,
shadowColor: "rgb(100,100,255,)",
marginBottom: 10,
},
image:{
height:70,
width: 80,
borderRadius: 10,
marginRight: 20,
marginBottom: 10,
},
textContainer:{
margin: 5,
height:"auto",
width:300,
justifyContent: "space-between",
alignItems: 'center'
}
});
CuponsDetails.js 我想在弹出窗口中显示这个屏幕
import { StatusBar } from 'expo-status-bar';
import { Button, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, Modal } from
'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
import {FontAwesome} from "@expo/vector-icons"
import { useState } from 'react';
export default function CuponDetails({route,navigation}) {
const {ImgUrl} = route.params;
const {Name} = route.params;
const {Desc} = route.params;
const {Title} = route.params;
const {Content} = route.params;
var TAG = "CouponDetail";
console.log(TAG,ImgUrl)
return (
<ScrollView style={{backgroundColor: "white"}}>
<View style= {styles.container}>
<View style = {styles.imageContainer}><Image style={{width:250, height: 200,}} resizeMode='cover' source={{uri: `${ImgUrl}`}} /></View>
<View style={styles.headingContainer}>
<Text style={{
fontWeight: "bold",
fontSize: 18
}}>{Name}</Text>
<Text style={{
fontWeight: "normal",
fontSize: 14,
}}>{Title}</Text>
</View>
<View style={styles.headingContainer}>
<Text style={{
fontWeight: "bold",
fontSize: 18
}}>Description</Text>
<Text style={{
fontWeight: "normal",
fontSize: 14,
}}>{Desc}</Text>
</View>
<View style={styles.headingContainer}>
<Text style={{
fontWeight: "bold",
fontSize: 18
}}>Content</Text>
<Text style={{
fontWeight: "normal",
fontSize: 14,
}}>{Content}</Text>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
backgroundColor: "white",
overflow: "scroll",
},
imageContainer:{
height: 200,
width: 250,
marginTop: 50,
marginBottom: 10,
borderRadius: 10,
overflow: "hidden",
elevation: 2,
shadowColor: "rgb(100,100,255,)",
},
headingContainer:{
width: 350,
marginVertical: 10,
height: "auto",
alignItems: "center",
borderRadius: 15,
padding: 8,
elevation: 2,
shadowColor: "rgb(100,100,255,)",
backgroundColor: "white"
}
})
我想做什么。 我正在使用平面列表在 HomeScreen.js 中渲染 Cupon.js，我想在按下渲染的 cupon 元素时打开一个弹出窗口，其细节如 CuponDetails.js 但弹出窗口应该在背景中有 HomeScreen。
【问题讨论】：
标签： javascript reactjs react-native react-native-flatlist