在 ListView 中为 React Native 显示图像和文本

Question

我正在尝试使用 ListView 通过 url 和文本加载图像并将数据显示到列表中，但是当我将其填充到列表视图图像和文本中时，我的图像不会显示。

我的代码是：

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

const styles = Style.create({
container: {
    flex: 1,
    marginTop: 20
}
});

class ListViewDemo extends React.Component {
constructor(props) {
    super(props);

    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.state = {
        dataSource: ds.cloneWithRows(["row 1", "row 2"])
    };
}
render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={data => {
                <View style={styles.container}>
                    <Image
                        source={{
                            uri:
                                "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg"
                        }}
                        style={{ width: 193, height: 110 }}
                    />
                    <Text> Asad </Text>
                </View>;
            }}
        />
    );
}
} [enter image description here][1]

export default ListViewDemo;

Answer 1

问题

图像不会在您的列表视图中呈现。

解决方案

我注意到，当组件在 react 中渲染时，有时无法显示图像。特别是当它们通过网络调用加载时。我在您的image component 中添加了style，将image source 放入变量中并修复了您在代码中遇到的一些语法错误。

最大的问题，以及它没有渲染图像的原因是你在renderRow prop 周围添加了{}，这需要return statement。当您在return data 周围提供() 时，暗示return，因为您使用的是fat arrow function。

所以这个，

renderRow = { (data) => { }} 

变成了这个，

renderRow={data => ( )}

示例

您可以将整个组件复制并粘贴到您的代码中，它会起作用。 这个已经测试过了，

import React, { Component } from 'react'; import { ListView, Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  img: {
    width: 193,
    height: 110,
  },
});

class ListViewDemo extends Component {
  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }
  render() {
    const imageSource = 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg';
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={data => (
          <View style={styles.container}>
            <Image
              source={{ uri: imageSource }}
              style={styles.img}
            />
            <Text>{data}</Text>
          </View>)}
      />
    );
  }
}


export default ListViewDemo;

概念证明

请查看显示您的组件现在工作的图像，

Answer 2

React Native 提供了一套用于呈现数据列表的组件。通常，您需要先使用 FlatList 或 SectionList，然后在数据源中提供图像。

    import React from 'react';
    import { FlatList, StyleSheet, Text, View } from 'react-native';
    
    const styles = StyleSheet.create({
      container: {
       flex: 1,
       paddingTop: 22
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
      img: {
        width: 100,
        height: 100
      },
    });
    
    const FlatListBasics = () => {
      return (
        <View style={styles.container}>
          <FlatList
            data={[
              {key: 'Devin', image: 'image1.png'},
              {key: 'Dan', image:'image2.png'},
          
            ]}
            renderItem={({item}) => <Image source={item.image} style={styles.img} /><Text style={styles.item}>{item.key}</Text>}
          />
        </View>
      );
    }
    
    export default FlatListBasics;

参考：https://reactnative.dev/docs/using-a-listview