Question

我正在尝试使用ListView通过网址和文本加载图片并将数据显示到List中，但是当我在listview中填充图像和文本时，我的图像就不显示了。

我的代码是：

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

<强>问题

图像无法在列表视图中呈现。

<强>解决方案

我注意到有时在组件渲染时会出现图像问题。特别是当它们通过网络呼叫加载时。我在style添加了image component，将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，然后在数据源中提供图像。

SELECT
  counts/sum(counts) over () as perc,
  state
FROM
  (
    SELECT
      count(city) AS counts,
      state
    FROM
      table
    GROUP BY
      state
  ) t1

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

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

2 个答案: