在本机反应上显示数组中的图像和文本答案

【问题标题】：display image and text from array on react native在本机反应上显示数组中的图像和文本
【发布时间】：2021-07-03 19:48:43
【问题描述】：

我是 react native 的新手。我想显示数组中的图像和文本。当我尝试从我的应用中提取图像时，它不起作用，图像不显示。


const DATA = [
  {
    title: "Animaux",
    data: ["Poissons","Crevettes","Escargots"],
    image: [require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png')]
  }
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const ImageType = ({ image }) => (
  <View style={styles.image}>
    <Image source={image}/>
  </View>
);

export default class InventaireScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item, image }) => 
            <View >
              <ImageType source={image}/>
              <Item title={item} />
            </View>
            }
          renderSectionHeader={({ section: { title } }) => (
            <View>
              <Text>{title}</Text>
            </View>
          )}
        />
      </SafeAreaView>
    );
  }
}

图像未显示。你能告诉我我哪里错了吗？谢谢。

编辑：

我这样修改了我的数组：


const DATA = [
  {
    title: "Poissons",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Crevettes",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Escargots",
    image: require('../assets/icon_aquarium_style.png')
  },
];

我尝试使用渲染提取数据：

export default class InventaireScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => 
            <View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'white'}}>
              <ImageType image={item.image}/>
              <Item title={item.data} />
            </View>
            }
          renderSectionHeader={({ section: { title } }) => (
            <View>
              <Text style={styles.header}>{title}</Text>
            </View>
          )}
        />
      </SafeAreaView>
    );
  }
}

我想使用标题参数显示部分标题，使用图像源显示图像，使用数组的数据参数显示文本。

我有这个错误

 ERROR    TypeError: undefined is not an object (evaluating 'items.length')
``

【问题讨论】：

尝试在 renderItem 中控制台 item 变量，看看里面有什么。

标签： javascript arrays react-native

【解决方案1】：

在你的声明中

 renderItem={({ item, image }) =>

第二个参数应该是索引，

应该是 'index' 而不是 'image'

 renderItem={({ item, index }) =>

为了从您的数组中获取参数“图像”，您需要更改您的代码，如下所示：

<View >
  <ImageType image={item.image}/>
  <Item title={item.title} />
</View>

【讨论】：

您好，感谢您的回答。我也试过你的解决方案。图像和文本不显示任何内容。但是，如果我逐项替换 item.title，则文本可以，但图像仍未显示。

【解决方案2】：

你的数据对象应该是一个通过它映射的对象数组，比如

var Data = [{title:"Poissons",image:require('../assets/icon_aquarium_style.png')},{title:"Crevettes",image:require('../assets/icon_aquarium_style.png')},{...},{...}]

然后在渲染项中

 {({ item }) => 
       <View >
         <ImageType image={item.image}/>
         <Item title={item.title} />
       </View>
      }

【讨论】：

您好，感谢您的帖子。我使用您的推荐编辑了我的帖子，但我也没有文字和图片，只有部分标题
你可以尝试只将图像字段中的相对路径放在 DATA 中而不使用 require() 并使用 require 像

【解决方案3】：

尝试更正renderItem。

renderItem={({ item }) => 
        <View >
          <ImageType image={item.image}/>
          <Item title={item.title} />
        </View>
        }

和 keyExtractor。

keyExtractor={(item, index) => item.title + index}

这个 keyExtractor 只会获取标题和索引，而不是完整的对象。

和数据格式。

const DATA = [
  {
    title: "Poissons",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Crevettes",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Escargots",
    image: require('../assets/icon_aquarium_style.png')
  },
];

【讨论】：

您好，感谢您的回答。我试过了，但我没有任何改变。图像和文本不显示任何内容。但是，如果我逐项替换 item.title，则文本可以，但图像仍未显示。
对不起，我没有看到数据格式。这是不正确的。