开发者问题收集

在 React Native 上显示来自数组的图像和文本

2021-04-07
1458

我是 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')
``
3个回答

在您的语句中

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

第二个参数应该是 index,

应该使用“ index ”而不是“ image

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

为了从数组中获取参数“image”,您需要更改代码,如下所示:

<View >
  <ImageType image={item.image}/>
  <Item title={item.title} />
</View>
Jitender Dev
2021-04-08

您的数据对象应该是通过它进行映射的对象数组,例如

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>
      }
lonecruisader
2021-04-08

尝试更正 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')
  },
];
prakhar tomar
2021-04-08