时间戳

首页 > 解决方案 > React Native - 带列的水平滚动

react-native - React Native - 带列的水平滚动

问题描述

我正在尝试实现以下视图，其中每列限制为水平 FlatList 中的 4 行歌曲详细信息。我设法在单个组件中创建了带有歌曲详细信息 + 购买按钮的每一行。

但是，我正在努力将每列限制为 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>

我的数据是这样构造的，目前存储在 state 中。

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

但是我收到以下错误消息（TypeError: items.map is not a function）。

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

标签： react-nativereact-native-iosreact-native-flatlist

解决方案

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

因此，你应该有

renderBestOfTheWeek = ({ item }) => {

推荐阅读