无法在 React-Native 中显示没有 keys/id 的值数组中的平面列表

Question

我正在用 react-native 构建一个照片源应用程序。为了测试我是否从数组中显示图像，我正在使用演示数组，如 photo_feed: [0, 1, 2, 3, 4],

我可以为一张图片显示单个 <View>，但是对于使用 flatList 的图片阵列，我会出现黑屏。

我已经尝试 SO 的回答，但我的数据没有每个元素的 ID，

单图视图的代码是

<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 repo link of project.

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;

Answer 1

您可以迭代数组并将图像 uri 传递给 Image 标签

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

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

Answer 2

您需要 return 必须呈现的项目。最佳做法是制作一个新功能和 return 项目。

 _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>
    );
  }

无法在 React-Native 中显示没有 keys/id 的值数组中的平面列表

can't dislplay flatlist from array of values without keys/id in React-Native

reactjs

react-native

react-native-android

react-native-flatlist