反应本机平面列表

Question

我正在尝试使用 React Native FlatList 循环获取新闻页面的 API 响应，该新闻页面将从包含 Web 视图元素的模式加载。一切似乎都很好，但每次我点击新闻文章时，它总是循环遍历所有新闻文章并给我最后一篇文章而不是点击的文章。如果我 console.log(item.title) 它 returns 单击文章标题，但不会加载它。我什至将文章数据作为状态传递，但我不确定我做错了什么，请帮忙。请忽略额外的代码，因为我专注于确保它在重构和删除未使用的 CSS 之前正常工作。这是代码。如果您需要 post 和 link 的回购协议，请告诉我。提前致谢。

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

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

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

而不是

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

也对 WebView 组件执行相同的操作。

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

还有一件事：

从 react-native 导入 Flatlist 而不是反应本机手势处理程序

反应本机平面列表

React Native Flat List

javascript

reactjs

react-native

fetch-api

react-native-flatlist