React Native Flat List

Question

我正在尝试使用React Native FlatList循环通过新闻页面的访存API响应，该页面将从包含Web视图元素的模式中加载。一切似乎都正常，但是每次单击新闻文章时，它总是遍历所有文章，并给我最后一篇文章，而不是被点击的文章。如果我console.log（item.title），它将返回单击的文章标题，但不会加载它。我什至以状态传递了商品数据，但不确定自己做错了什么，请帮忙。请忽略多余的代码，因为我专注于在重构和删除未使用的CSS之前确保其正常工作。这是代码。让我知道您是否需要回购来发布链接。预先感谢。

import React, { Component } from "react";
import { WebView } from "react-native-webview";
import {
  View,
  StyleSheet,
  Text,
  ActivityIndicator,
  Image,
  Button,
  Linking,
  TouchableOpacity,
  Modal
} from "react-native";
import { FlatList } from "react-native-gesture-handler";

export default class NewsPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoading: true,
      modalVisible: false
    };
  }

  componentDidMount() {
    return fetch(
      "https://newsapi.org/v2/everything?q=empleos&language=es&apiKey=bc9471b0c90c4d1a8d41860292e59d6b"
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson.articles
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  setModalVisible(articleData) {
    this.setState({
      modalVisible: true,
      modalArticleData: articleData
    });
  }

  closeModal = () => {
    this.setState({
      modalVisible: false,
      modalArticleData: {}
    });
  };

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, padding: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={{ flex: 1, paddingTop: 20 }}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <View style={styles.newsListContainer}>
              <Image
                style={styles.newsImage}
                source={{
                  uri:
                    item.urlToImage != null
                      ? item.urlToImage
                      : "../assets/icon.png"
                }}
              />
              <View style={styles.newsInfo}>
                <Text numberOfLines={2} style={styles.newsTitle}>
                  {item.title}
                </Text>
                <Text numberOfLines={3} style={styles.newsDescription}>
                  {item.description}
                </Text>
                <Text>{item.author}</Text>
              </View>
              <View style={styles.newsLink}>
                <Button
                  title="Leer"
                  onPress={() => {
                    console.log(item);
                    this.setModalVisible(item);
                  }}

                  // {Linking.openURL(item.url);}}
                />
              </View>
              <Modal
                animationType="slide"
                transparent={false}
                visible={this.state.modalVisible}
              >
                <View style={styles.newsHeader}>
                  <TouchableOpacity
                    onPress={() => {
                      this.closeModal();
                    }}
                  >
                    <Text style={styles.newsClose}>Cerrar</Text>
                  </TouchableOpacity>
                  <Text>{item.title}</Text>
                </View>
                <WebView
                  startInLoadingState={true}
                  source={{ uri: item.url }}
                  style={{ padding: 8 }}
                />
              </Modal>
            </View>
          )}
        />
      </View>
    );
  }
}

NewsPage.navigationOptions = {
  headerTitle: "Noticias en Español"
};

const styles = StyleSheet.create({
  mainBackgroundColor: {
    backgroundColor: "#007bff",
    padding: 8
  },
  mainBackground: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1
  },
  textHeader: {
    backgroundColor: "#fff",
    marginTop: 16,
    fontSize: 32,
    padding: 8,
    borderRadius: 8,
    color: "#007bff"
  },
  firstText: {
    fontSize: 16,
    marginTop: 16,
    marginBottom: 0,
    color: "#fff"
  },
  phone: {
    marginTop: 16,
    color: "#fff"
  },
  secondText: {
    fontSize: 16,
    marginTop: 0,
    color: "#fff"
  },
  thirdText: {
    fontSize: 16,
    marginTop: 8,
    color: "#ffffff",
    textTransform: "uppercase",
    textAlign: "center",
    padding: 8,
    marginBottom: 12
  },
  firstButton: {
    marginBottom: 16
  },

  newsListContainer: {
    width: "100%",
    marginBottom: 4,
    padding: 4,
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },

  newsImage: {
    flexBasis: "25%",
    height: "100%"
  },

  newsInfo: {
    flexBasis: "55%",
    padding: 2,
    alignSelf: "flex-start"
  },

  newsLink: {
    flexBasis: "20%"
  },

  newsTitle: {
    fontSize: 20,
    color: "#000000",
    marginLeft: 8
  },

  newsDescription: {
    fontSize: 12,
    color: "efefef",
    marginLeft: 8
  },

  newsHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 4
  },

  newsClose: {
    fontSize: 20,
    color: "red"
  }
});

Answer 1

我认为答案可能是您需要从react-native而不是react-native-gesture-handler导入Flatlist。

Answer 2

在您的模态中，您正在使用

<Text>{item.title}</Text>

代替

<Text>{this.state.modalArticleData.title}</Text>

对于WebView组件也是如此。

source={{ uri: this.state.modalArticleData.url }}

另外一件事情：

• 从react-native而不是Import Flatlistreact-native-gesture-handler