Модальные и FlatList

Question

Я работаю над своим первым реактивным проектом, и это также моя первая работа с JavaScript. Я хочу по крайней мере новостное приложение с собственной базой данных. Бэкэнд уже закончен. Сейчас я нахожусь в борьбе с приложением, я хочу всплывающее окно с модальным с информацией из моего API, таких как news_image, news_content и news_title. Новости находятся в FlatList, и теперь я хочу нажать на элемент, чтобы показать содержимое в модальном всплывающем окне. Итак, вот мой код, где я борюсь. я всегда получаю ошибку. так как я могу решить эту проблему? танков много!

import React from "react";
import {
  AppRegistry,
  FlatList,
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ActivityIndicator,
  ListView,
  YellowBox,
  Alert,
  TextInput
} from "react-native";
import { WebBrowser } from "expo";
import Button from "react-native-button";
import Modal from "react-native-modalbox";
import Slider from "react-native-slider";
import { MonoText } from "../components/StyledText";
export default class NewsFeed extends React.Component {
  static navigationOptions = {
    title: "HomeScreen"
  };
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
    YellowBox.ignoreWarnings([
      "Warning: componentWillMount is deprecated",
      "Warning: componentWillReceiveProps is deprecated"
    ]);
  }
  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "#000"
        }}
      />
    );
  };
  webCall = () => {
    return fetch("http://XXXXXXXXXXXX.com/connection.php")
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson
          },
          function() {
            // In this block you can do something with new state.
          }
        );
      })
      .catch(error => {
        console.error(error);
      });
  };
  onClose() {
    console.log("Modal just closed");
  }
  onOpen() {
    console.log("Modal just opened");
  }
  onClosingState(state) {
    console.log("the open/close of the swipeToClose just changed");
  }
  componentDidMount() {
    this.webCall();
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <ActivityIndicator size="large" />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.dataSource}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => (
            <View style={{ flex: 1, flexDirection: "row" }}>
              <Image
                source={{ uri: item.news_image }}
                style={styles.imageView}
              />
              <Text
                onPress={() => this.refs.modal.open()}
                style={styles.textView}
              >
                {item.news_title}
                {"\n"}
                <Text style={styles.textCategory}>{item.author}</Text>
              </Text>
              <Text style={styles.textViewDate}>{item.created_at}</Text>
              <Modal
                style={[styles.modal]}
                position={"bottom"}
                ref={"modal"}
                swipeArea={20}
              >
                <ScrollView>
                  <View style={{ width: "100%", paddingLeft: 10 }}>
                    {item.news_content}
                  </View>
                </ScrollView>
              </Modal>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: "center",
    flex: 1,
    margin: 5
  },
  imageView: {
    width: "25%",
    height: 100,
    margin: 7,
    borderRadius: 7
  },
  textView: {
    width: "100%",
    height: "100%",
    textAlignVertical: "center",
    padding: 10,
    fontSize: 20,
    color: "#000"
  },
  textViewDate: {
    width: "30%",
    textAlignVertical: "center",
    padding: 15,
    color: "#afafaf"
  },
  textCategory: {
    color: "#d3d3d3",
    fontSize: 12
  },
  modal: {
    justifyContent: "center",
    alignItems: "center",
    height: "90%"
  }
});

Answer 1

Я думаю, что проблема в модале. Можете ли вы переписать код, как показано ниже?

return (
  <View style={styles.MainContainer}>
    <FlatList
      data={this.state.dataSource}
      ItemSeparatorComponent={this.FlatListItemSeparator}
      renderItem={({ item }) => (
        <View style={{ flex: 1, flexDirection: "row" }}>
          <Image source={{ uri: item.news_image }} style={styles.imageView} />
          <Text onPress={() => { this.setState({ item: item.news_content }, () => this.refs.modal.open()); }} style={styles.textView}>
            {item.news_title}
            <Text style={styles.textCategory}>{item.author}</Text>
          </Text>
          <Text style={styles.textViewDate}>{item.created_at}</Text>
        </View>
      )}
      keyExtractor={(item, index) => index.toString()}
    />
    <Modal
      style={[styles.modal]}
      position={"bottom"}
      ref={"modal"}
      swipeArea={20}
    >
      <ScrollView>
        <View style={{ width: "100%", paddingLeft: 10 }}>
          {this.state.item}
        </View>
      </ScrollView>
    </Modal>
  </View>
);

Для всплывающего экрана достаточно только одного модала.

И вы можете попробовать этоКроме того, измените вашу ссылку на

ref={ref => this.modalRef = ref}

И используйте вот так,

this.modalRef.open()

Answer 2

Проверьте приведенный ниже код и сравните его с вашим кодом.

Я не уверен, где находится ваша ошибка или какова ее точная ошибка, но вы можете проверить приведенный ниже пример кода, который похож на ваш, для сравнения.

Я использую ' Axios ' вместо fetch () из-за автоматического преобразования в JSON и некоторые другие полезные вещи .

npm install --save axios

Код:

import React, { Component } from 'react'
import {
    ActivityIndicator,
    FlatList,
    Image,
    ScrollView,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import Axios from 'axios';
import Modal from "react-native-modalbox";

export default class NewsFeed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            selectedIndex : -1
        }
    }

    componentDidMount = () => {
        Axios.get('<URL>')
            .then(response => {
                const { data } = response;
                this.setState({dataSource : data});
            }).catch(error => {
                const { data } = error;
                console.log(data);
            });
    }

    _openModal = index => {
        this.setState({ selectedIndex : index });
        this.modalReference.open();
    }

    _renderSeparator = () => {
        return <View style={{ flex: 1, borderBottomWidth: 0.5, borderBottomColor: '#000000' }} />
    }

    _renderItem = ({item, index}) => {
        const {news_image, news_title, news_content, author, created_at} = item;

        return <TouchableOpacity onPress={() => this._openModal(index)} >
            <View style={{ flex: 1, flexDirection: 'row' }}>
                <Image style={{ flex: 1, width: null, height: 200 }} source={{ uri: news_image }} />
                <Text>{news_title}</Text>
                <Text>{author}</Text>
                <Text>{created_at}</Text>
            </View>
        </TouchableOpacity>;
    }

    render = () => {
        const { dataSource, selectedIndex } = this.state;
        const { news_content } = dataSource[selectedIndex];

        return dataSource.length === 0 ? 
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
              <ActivityIndicator size="large" />
            </View> : 
            <View style={styles.MainContainer}>
                <FlatList
                    data={dataSource}
                    keyExtractor={(item, index) => index.toString()}
                    ItemSeparatorComponent={this._renderSeparator}
                    renderItem={this._renderItem}
                />
                <Modal ref={reference => modalReference = reference}>
                    <ScrollView style={{ flex: 1, padding: 20 }}>
                        <Text>{news_content}</Text>
                    </ScrollView>
                </Modal>
            </View>
    }
}