не может отобразить плоский список из массива значений без ключей / идентификатора в React-Native - PullRequest
Новая
       13

не может отобразить плоский список из массива значений без ключей / идентификатора в React-Native

0 голосов
/ 19 марта 2019

Я создаю приложение фотоподачи в реагирующем.для проверки, отображаю ли я массив изображений, я использую демонстрационный массив, так как photo_feed: [0, 1, 2, 3, 4],

Я могу отобразить один <View> для одного изображения, но для массива изображений, используя flatList,Я получаю пустой экран.

Я пытался этот ответ от SO, но мои данные не имеют идентификатора для каждого элемента,

код одного изображения-view 

<View style={styles.container}>
        <View style={styles.header}>
          <Text> feed </Text>
        </View>

        {/* Signle Image Component. */}
        <View>
          <View>
            <Text>Time ago</Text>
            <Text>@username</Text>
          </View>

          <View>
            <Image
              source={{
                // uri:
                //   "https://source.unsplash.com/random/500x" +
                //   Math.floor(Math.random() * 800 + 500)

                uri: "https://source.unsplash.com/random/50x70/"
              }}
              style={styles.profilephoto}
            />
          </View>

          <View>
            <Text>Caption of post</Text>
            <Text>View all Comments</Text>
          </View>
        </View>

одиночное изображение отображается правильно, но как я могу отображать изображения для всех элементов в массиве?

GitHub ссылка репо проекта.

код feed.js равен 

import React, { Component } from "react";
import { View, Text, StyleSheet, Image, FlatList } from "react-native";

class feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      photo_feed: [0, 1, 2, 3, 4], // this is data of our app
      refresh: false
    };
  }

  loadNew = () => {
    console.log("LoadNew() is called");
    this.setState({
      refresh: true
    });
    this.setState({
      photo_feed: [5, 6, 7, 8, 9],
      refresh: false // after loading new photos [5,6,7,8,9] stop refreshing feed
    });
  };

  render() {
    let i = 0;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text> feed </Text>
        </View>

        <FlatList
          refreshing={this.state.refresh}
          onRefresh={this.loadNew}
          data={this.state.photo_feed}
          keyExtractor={(item, index) => "" + index}
          style={styles.flatlist}
          renderItem={({ item, index }) => {
            console.log("index is " + index);
            // console.log("item is " + item);
            // return one element for each item.

            <View key={index}>
              <View>
                <Text>Time ago</Text>
                <Text>@username</Text>
              </View>

              <View>
                <Image
                  source={{
                    // uri:
                    //   "https://source.unsplash.com/random/500x" +
                    //   Math.floor(Math.random() * 800 + 500)

                    uri: "https://source.unsplash.com/random/500x800/"
                  }}
                  style={styles.profilephoto}
                />
              </View>

              <View>
                <Text>Caption of post</Text>
                <Text>View all Comments</Text>
              </View>
            </View>;
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: 70,
    paddingTop: 30,
    backgroundColor: "white",
    borderColor: "lightgrey",
    borderBottomWidth: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  profilephoto: {
    resizeMode: "cover",
    width: "100%",
    height: 250
  },
  flatlist: {
    flex: 1
    // backgroundColor: "#0ee"
  }
});
export default feed;

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Вам необходимо вернуть предмет, который должен быть предоставлен. Лучше всего будет создать новую функцию и вернуть элемент. 

 _renderItem = (item, index) => {
    console.log(item, index);
    return (
      <View key={index}>
        <View>
          <Text>Time ago</Text>
          <Text>@username</Text>
        </View>

        <View>
          <Image
            source={{
              // uri:
              //   "https://source.unsplash.com/random/500x" +
              //   Math.floor(Math.random() * 800 + 500)

              uri: "https://source.unsplash.com/random/500x800/"
            }}
            style={styles.profilephoto}
          />
        </View>

        <View>
          <Text>Caption of post</Text>
          <Text>View all Comments</Text>
        </View>
      </View>
    )
  }

  render() {
    let i = 0;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text> feed </Text>
        </View>        

        <FlatList
          refreshing={this.state.refresh}
          onRefresh={this.loadNew}
          data={this.state.photo_feed}
          keyExtractor={(item, index) => "" + index}
          style={styles.flatlist}
          renderItem={this._renderItem}
        />
      </View>
    );
  }
0 голосов
/ 19 марта 2019

Вы можете перебрать свой массив и передать URI изображения в Image tag 

 <Image
          source={{
            // uri:
            //   "https://source.unsplash.com/random/500x" +
            //   Math.floor(Math.random() * 800 + 500)

            uri: {e.g : this.image.uri}
          }}
...