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

Question

我是 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')
``

Answer 1

尝试更正renderItem。

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

和密钥提取器。

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

此 keyExtractor 将仅获取标题和索引，而不是完整的 object。

和数据格式。

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')
  },
];

Answer 2

在你的陈述中

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

第二个参数应该是索引，

而不是“图像”应该是“索引”

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

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

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

Answer 3

你的数据 object 应该是一个对象数组到 map 通过它，比如

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>
      }