在react native中按下字段时过滤项目

Question

我有一个带有不同卡片的屏幕(有文章信息)我试图按类别过滤文章当按下方便的类别时，我希望选择该类别，并显示属于该类别的文章，另一方面，当没有选择任何类别时，显示所有类别的所有文章(如果您看下面的图片，这将更有意义)

用于显示不同类别图片的代码：

import TouchableScale from "react-native-touchable-scale";
import { category } from "../api/data";

import colors from "../config/colors";

function HotTopics({ navigation }) {
  //const { width, height } = Dimensions.get("window");
  return (
    <View style={styles.Container}>
      <View>
        <Text style={styles.CategoryText}>Hot Topics</Text>
      </View>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{ paddingHorizontal: 15 }}
        data={category}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <TouchableScale
                  activeScale={0.9}
                  tension={50}
                  friction={7}
                  useNativeDriver
                  onPress={() => navigation.navigate({ id: item.id })}
                >
                  {/* to show the horizental news list*/}

                  <Image
                    source={{ uri: item.image }}
                    style={{
                      width: 100,
                      height: 120,
                      borderRadius: 16,
                      marginRight: 10,
                    }}
                  />

                  {/* to show the news titles inside the pictures*/}
                  <SharedElement
                    id={`item.${item.id}.text`}
                    style={{
                      width: 100,
                      position: "absolute",
                      bottom: 95,
                      //left: 10,
                      paddingHorizontal: 5,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <Text style={styles.blogTitle}>{item.title}</Text>
                  </SharedElement>
                  {/* to show the pictre of the author of the news article*/}

                  {/* to show the name of the author and read time of article*/}
                </TouchableScale>
              </View>
            </View>
          );
        }}
      />
    </View>
  );
}

用于显示文章卡片的代码如下：(ArticleList.js)

function ArticleList({ navigation, post }) {
  if (!post.length) {
    return null;
  } // so we dont show anything untill we have articles
  return (
    <>
      <View style={styles.Container}>
        <Text style={styles.HeadText}>Popular</Text>
        <Text style={styles.subText}>Show all</Text>
      </View>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={post}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <TouchableScale
              activeScale={0.9}
              tension={50}
              friction={7}
              useNativeDriver
              onPress={() =>
                navigation.navigate("DetailScreen", { data: item })
              }
            >
              <Card item={item} />
            </TouchableScale>
          );
        }}
      />
    </>
  );
}

在主屏幕上，我调用ArticleList.js并像这样过滤数据：

// for filtering the data 
const filterResultsByCategory = (category) => {
    return post.filter((onepost) => {
      return onepost.category === category;
    });
  };
// to show the data 
<ArticleListVer post={filterResultsByCategory("Politics")} />

用于主屏幕的代码：

import React, { useState } from "react";
import { StyleSheet, View, ScrollView, SafeAreaView } from "react-native";
import Header from "../components/Header";
import ArticleList from "../components/ArticleList";
import ArticleListVer from "../components/ArticleListVer";
import Categories from "../components/Categories";
import HotTopics from "../components/HotTopics";
import { LinearGradient } from "expo-linear-gradient";
import useArticles from "../hooks/useArticles";
import usePosts from "../hooks/usePosts";
function MainScreen({ navigation }) {
  const [Category, setCategory] = useState();
  const [loadApi, data, errorMessage] = useArticles();
  const [loadPost, post] = usePosts();
  const filterResultsByCategory = (category) => {
    return post.filter((onepost) => {
      return onepost.category === category;
    });
  };
  return (
    <View style={{ flex: 1 }}>
      {/* header Date and title */}
      <LinearGradient
        colors={["#353540", "#353540", "#1E1E24"]}
        style={{ width: "100%", height: "100%" }}
      >
        <SafeAreaView style={styles.container}>
          <ScrollView style={styles.scrollView}>
            <Header headerTitle="TODAY'S ARTICLES" />
            {/* haeder Categories */}
            <Categories />
            {/* show the data in a flatlist */}
            <ArticleList data={data} navigation={navigation} />
            {/* show the categories in a flatlist*/}
            <HotTopics onCategorySelect={this.setCategory} />
            {/* show the vertical Article list */}
            <ArticleListVer
              post={filterResultsByCategory(this.state.category)}
            />
          </ScrollView>
        </SafeAreaView>
      </LinearGradient>
    </View>
  );
}
MainScreen.navigationOptions = () => {
  return {
    headerShown: false,
  };
};
const styles = StyleSheet.create({});
export default MainScreen;

Answer 1

处理此问题的最简单方法是使用一个回调函数从HotTopics组件设置状态，如下所示

const [category, setCategory] = useState();

在渲染中

  <HotTopics onCategorySelect={setCategory} />
  <ArticleListVer post={filterResultsByCategory(category)} />

对于热点主题的onclick，您可以这样做

onPress={() =>
            this.props.onCategorySelect(item.category)
          }

通过这样做，您将使用新的Category重新呈现父对象。对于reset，您需要一个按钮将状态重置为empty，以便显示所有项目。