在本机/反应中过滤和映射 [英] Filttering and mapping in react native/react
问题描述
我的问题是，如何根据在产品"组件中选择的选项卡映射产品"对象?示例:在产品"组件中，它为每种类型的食物(dataSaleThumb)呈现8个选项卡，如果我选择1个选项卡(从8个选项卡中选择)，其值tab: "five"，则需要过滤并映射出所有具有道具category: "food".或者单击具有值tab: "six"的选项卡，仅映射具有category:"beverages"道具的产品.希望您能理解这个问题，在此先感谢大家！
My question here is, how do I map the 'products' object based on the tab I choose in the Products component? Example: In the Products component, it renders 8 tabs for each type of food (dataSaleThumb), if I choose 1 tab (out of 8) that has the value tab: "five" I need to filter and map out all of the products that have the prop category: "food". Or clicking on the tab that has the value tab: "six" maps out only the products that have the category:"beverages" prop. I hope you understood the question and I thank you all in advance!
class ProductsStore {
@observable products = [
{
id: 1,
name: 'sandwich',
description: 'tasty',
price: 150,
catergory: "food"
},
{
id: 2,
name: 'fanta',
description: 'orange drink',
price: 250,
catergory: "beverage"
},
{
id: 3,
name: 'hamburger',
description: 'meat',
price: 350,
catergory: "food"
},
{
id: 4,
name: 'cola',
description: 'caramel drink',
price: 250,
catergory: "beverage"
}
];
}
export default ProductsStore;
import React, {Component} from "react";
import {View, Dimensions, TouchableOpacity,FlatList, Text} from "react-native";
import {Container, Content, List} from "native-base";
import {observer, inject} from "mobx-react";
import ThemeHeader from "../../components/Header/index.js";
import SaleThumb from "../../components/SaleThumb/index.js";
import SaleTitle from "../../components/SaleTitle/index.js";
import MyFooter from "../../components/Footer";
import styles from "./styles.js";
var deviceWidth = Dimensions.get("window").width;
var deviceHeight = Dimensions.get("window").height;
@inject("products")
@observer
class Product extends Component {
render() {
const navigation = this.props.navigation;
var dataSaleThumb = [
{
id: 1,
imageSaleThumb: require("../../../assets/p1.jpg"),
text: "ABCDFG",
tab: "one"
},
{
id: 2,
imageSaleThumb: require("../../../assets/p2.jpg"),
text: "ABCDFG",
tab: "two"
},
{
id: 3,
imageSaleThumb: require("../../../assets/p3.jpg"),
text: "ABCDFG",
tab: "three"
},
{
id: 4,
imageSaleThumb: require("../../../assets/p4.jpg"),
text: "ABCDFG",
tab: "four"
},
{
id: 5,
imageSaleThumb: require("../../../assets/p5.jpg"),
text: "ABCDFG",
tab: "five"
},
{
id: 6,
imageSaleThumb: require("../../../assets/p6.jpg"),
text: "ABCDFG",
tab: "six"
},
{
id: 7,
imageSaleThumb: require("../../../assets/p7.jpg"),
text: "ABCDFG",
tab: "seven"
},
{
id: 8,
imageSaleThumb: require("../../../assets/p8.jpg"),
text: "ABCDFG",
tab: "eight"
}
];
return (
<Container>
<ThemeHeader
PageTitle="PRODUCT"
IconLeft="ios-arrow-back"
route="homepage"
IconRight="ios-search"
navigation={navigation}
/>
<Content
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 10 }}
style={{ marginBottom: 50 }}
>
<FlatList
bounces={false}
contentContainerStyle={styles.saleThumb}
data={dataSaleThumb}
renderItem={item => (
<SaleThumb
navigation={navigation}
blockHeight={deviceHeight / 3 - 45}
blockWidth={deviceWidth / 3 - 10}
saleData={item.item.text}
imageSource={item.item.imageSaleThumb}
/>
)}
/>
</View>
</Content>
<MyFooter navigation={navigation} selected={"home"} />
</Container>
);
}
}
export default observer(Product);
推荐答案
对于任何想知道的人，我在堂兄的帮助下找到了一个解决方案.
For anyone wondering, I found a solution with a little help from a cousin.
首先，我们在产品"屏幕的dataSaleThumb对象中添加类别道具:
First we add the category props in the dataSaleThumb object in the Product screen:
var dataSaleThumb = [
{
id: 1,
imageSaleThumb: require("../../../assets/p1.jpg"),
text: "ABCDFG",
tab: "one",
category: "beverage"
},
{
id: 2,
imageSaleThumb: require("../../../assets/p2.jpg"),
text: "ABCDFG",
tab: "two",
category: "food"
}
...
然后我们在产品"屏幕中声明一个onPress函数:
Then we declare an onPress function in the Product screen:
<FlatList
bounces={false}
contentContainerStyle={styles.saleThumb}
data={dataSaleThumb}
renderItem={item => (
<SaleThumb
onPress={() => navigation.navigate("ProductCatalogue", {categoryId: categoryId})}
navigation={navigation}
blockHeight={deviceHeight / 3 - 45}
blockWidth={deviceWidth / 3 - 10}
saleData={item.item.text}
imageSource={item.item.imageSaleThumb}
categoryId={item.item.category}
/>
)}
/>
其中ProductCatalogue(您可以随意命名)是显示特定类别产品的屏幕.之后，在ProductCatalogue屏幕中，您可以使用IF语句来映射特定项目，如下所示:
where ProductCatalogue (you can call it whatever you like) is the screen where the products with the specific category will render. After that in the ProductCatalogue screen you map the specific items with an IF statement like this:
renderItem={item => {
if (item.item.category === navigation.getParam('categoryId')) {
return(
<ListThumb
key={item.item.id}
navigation={navigation}
brand={item.item.name}
imageSource={item.item.image}
discountedPrice={item.item.price}
description={item.item.description}
/>)
}
}}
这样，当您按特定选项卡时，它将道具category从产品屏幕传递到ProductCatalogue屏幕.因此，现在如果选择选项卡1，我将只获得带有category: "beverage"的产品，它们将在ProductCatalogue屏幕中呈现，在这种情况下为cola和fanta.
This way it passes the props category from the Product screen onto the ProductCatalogue screen when you press on the specific tab. So now if I select tab 1 I will get only products with category: "beverage" and they will render in the ProductCatalogue screen, in this case, cola and fanta.
希望我帮助了某人，加油！
Hope I helped someone, cheers!
这篇关于在本机/反应中过滤和映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
