Question

我正在尝试实现以下view，其中在水平FlatList中每列限于歌曲详细信息的4行。我设法在single component的每一行中添加了歌曲详细信息和购买按钮。

但是，我正在努力将每一列限制为仅4行结果。我目前正在使用地图功能渲染每个组件：

renderBestOfTheWeek = (items) => {
  return (
    <View>
      {items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
    </View>
  )
}

render() {
  return (
    <FlatList
      data={this.state.bestOfTheWeek}
      horizontal={true}
      renderItem={this.renderBestOfTheWeek}
    />
  )
}

SongItemHorizontalScroll组件：

   <View style={containerStyle}>
      <Image
        source={{ uri: thumbnail_image }}
        style={albumImageStyle}
      />
      <View style={songDetailButtonContainer}>
        <View style={songInfoStyle}>
          <Text
            style={{ fontSize: 12, lineHeight: 14, width: 160 }}
            numberOfLines={1}>
            {title}
          </Text>
          <Text
            style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
          >{artist} - {album}</Text>
        </View>
        <Button onPress={() => Linking.openURL(url)} price={price} />
      </View>
    </View>

我的数据已经按照这种结构进行了构造，并且当前存储在状态中。

0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]

但是我收到以下错误消息（ TypeError：item.map不是函数）。

我哪里做错了，实现这一目标的正确方法是什么？

Answer 1

看起来items变成了对象，而不是原来的数组。尝试再次将其设置为数组。

renderBestOfTheWeek = (items) => {
  return (
    <View>
      {Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
    </View>
  )
}

Answer 2

renderItem函数接收一个包含键项和索引的对象。

因此，您应该拥有

renderBestOfTheWeek = ({ item }) => {

Answer 3

基于@Foyarash的建议和帮助，以下是解决方法：

renderBestOfTheWeek = ({ item }) => {
    return (
        <View>
            {item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
        </View>
    )
}

React Native-带列的水平滚动

3 个答案: