react native/react中的过滤和映射

Question

我的问题是，如何根据我在产品组件中选择的选项卡映射“产品”对象？示例：在 Products 组件中，它为每种类型的食物 (dataSaleThumb) 呈现 8 个选项卡，如果我选择 1 个选项卡（共 8 个），其值为 tab: "five"，我需要过滤并映射出所有具有道具category: "food"。或者单击具有值 tab: "six" 的选项卡仅映射出具有 category:"beverages" 属性的产品。我希望你理解这个问题，我提前谢谢大家！

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);

Answer 1

对于任何想知道的人，我在表弟的帮助下找到了解决方案。

首先我们在Product界面的dataSaleThumb对象中添加category props：

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"
      }
...

然后我们在 Product 屏幕中声明一个 onPress 函数：

<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 语句映射特定项目：

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。

希望我能帮助到别人，干杯！