Question

我的问题是，如何根据在“产品”组件中选择的选项卡映射“产品”对象？示例：在“产品”组件中，它为每种食物（dataSaleThumb）呈现8个标签，如果我选择8个标签中的1个，其值是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

对于任何想知道的人，我在堂兄的帮助下找到了一个解决方案。

首先，我们在“产品”屏幕的dataSaleThumb对象中添加类别道具：

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函数：

<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。

希望我帮助了某人，加油！

在本机/反应中过滤和映射

1 个答案: