React Native - 带列的水平滚动

Question

我正在尝试实现以下 view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a 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) [{…}, {…}, {…}, {…}]

但是我收到以下错误消息（类型错误：items.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 - 带列的水平滚动

React Native - Horizontal scroll with columns

react-native

react-native-ios

react-native-flatlist