Question

我正在用本机构建光敏进纸应用程序。为了测试我是否以数组形式显示图像，我使用的是演示数组，例如photo_feed: [0, 1, 2, 3, 4],

我可以为一个图像显示单个<View>，但是对于使用flatList的图像阵列，我将显示空白屏幕。

我尝试了this的答案，但是我的数据没有每个元素的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

您需要返回必须渲染的项目。最佳做法是创建一个新函数并返回该项目。

 _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中没有键/ ID的情况下从值数组中显示平面列表

2 个答案: