FlatList onPress 到带有数据的不同屏幕 [英] FlatList onPress to different screen with data

问题描述

我有一个列表中的国家/地区列表，其中包含我使用 API 制作的搜索过滤器.我想这样做，当我在平面列表中按下一个国家/地区的名称时，它会将我带到一个屏幕，在该屏幕上它会打印出该特定国家/地区的名称及其案例数.LocationDataScreen 是我想打印出该信息的屏幕.任何帮助表示赞赏:)

I have a list of countries in a flatlist with a search filter I made using an API. I want to make it so when I press on a country's name in the flatlist, it takes me to a screen where it prints out that specific country's name and it its number of cases. LocationDataScreen is the screen I want to print out that info. Any help is appreciated :)

这是我当前的代码如下:

This is my current code below:

const fetchData = () => {
    const apiURL = "https://coronavirus-19-api.herokuapp.com/countries";
    fetch(apiURL)
      .then((response) => response.json())
      .then((responseJson) => {
        setFilteredData(responseJson);
        setMasterData(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const SearchFilter = (text) => {
    if (text) {
      const newData = filteredData.filter((item) => {
        const itemData = item.country;

        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilteredData(newData);
      setSearch(text);
    } else {
      setFilteredData(masterData);
      setSearch(text);
    }
  };

  const ItemView = ({ item }) => {
    
    return (
      <RectButton
        onPress={() => navigation.navigate("LocationDataScreen")}
        style={styles.searchcontainer}
      >
        <Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

  const ItemSeparatorView = () => {
    return (
      <View
        style={{
          height: 1.5,
          width: "90%",
          marginLeft: 35,
          backgroundColor: "#f3f2f8",
        }}
      />
    );
  };

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      stickyHeaderIndices={[0]}
      style={[styles.container, { flex: 1 }]}
    >
      <SearchBarCustom
        value={search}
        placeholder="Search"
        containerStyle={{ backgroundColor: "#f3f2f8" }}
        inputContainerStyle={{
          backgroundColor: "#e3e3e9",
          height: 25,
          marginHorizontal: 5,

          marginTop: -5,
        }}
        placeholderTextColor="#96969b"
        platform="ios"
        onChangeText={(text) => SearchFilter(text)}
      />
      <FlatList
        data={filteredData}
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={ItemSeparatorView}
        renderItem={ItemView}
        style={styles.listcontainer}
      />
    </ScrollView>
  );
};

推荐答案

查看 小吃 我为你制作的.它有实现.

Check out a Snack that I created for you. It has the implementation.

你的 ItemView 函数应该是这样的

Your ItemView function should look like this

const ItemView = ({ item }) => {
    return (
      <RectButton
        onPress={() =>
          navigation.navigate('LocationDataScreen', { item })
        } // In this line..all the item keys are being passed as props for next screen
        style={styles.searchcontainer}>
        <Text style={[styles.itemStyle, { textTransform: 'capitalize' }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

您的 LocationDataScreen.js 屏幕应如下所示

Your LocationDataScreen.js screen should look like this

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

function LocationDataScreen({ route, navigation }) { // You can access props from here
  const { item } = navigation.state.params || {};
  return (
    <View style={styles.container}>
      <Text>Country Name - {item.name}</Text>
      <Text>Country Cases - {item.cases}</Text>
    </View>
  );
}

export default LocationDataScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

对于 Custom Header Title 作为 item.country 我们可以这样做

For Custom Header Title as item.country we can do this

在你的 ItemView 函数中，你的 onPress 应该是这样的

In you ItemView function your onPress should look like this

onPress={() =>
          navigation.navigate('Screen2', { item: item, name: item.country })
        }

第二个屏幕的 Stack.Screen 部分应该如下所示

Your Stack.Screen part for second screen should look like this

  <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={({ route }) => ({
          headerTitle: route.params.name,
          headerShown: true,
        })}
      />

现在，当您点击国家/地区时，您会在顶部看到其名称作为标题标题.

Now when you click on the country you'll see its name on the top as Header title.

查看我的 Snack 以查看工作示例.

Check my Snack to see working example.

这篇关于FlatList onPress 到带有数据的不同屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！