如何更改 flatlist renderitem 中的特定索引图像在有条件的情况下反应本机

Question

我正在平面列表中显示一些音频数据。平面列表，我在主 class 中显示，但是，RenderItem 在单独的 class 中调用。所以，一旦我点击特定的行项目，我就会播放音频文件。但是，我必须更改暂停以播放图像。但是，当我尝试更改它时，所有图像都在发生变化。默认情况下，我显示所有带有暂停图标的单元格图像。

此外，一旦用户在音频播放器中点击 play/pause，那么我必须更改 flatlist 当前播放的项目行图像 play/pause。

我在屏幕底部显示音频播放器。一旦用户点击平面列表暂停图标，我就会在屏幕底部播放音频播放器。

我累了，但是，所有的细胞图像都在变化。有什么建议吗？

注意：我们有不同的 UI 用于音频播放器，因此，我为播放器创建了自定义 UI 而不是默认媒体组件。

主要class.js

  selectedAudio = (item, index) => {

    if (isConnected) {
      if (!isEmpty(audioURL)) {
        //   console.log('selected audio url is', audioURL);
        SoundPlayer.playUrl(audioURL);
        this.setState({
          paused: false,
          currentPosition: 0,
          currentTime: 0,
          audioSelectedIndex: index,
        });
      }
    } else {
    }
  }

  renderItem = ({ item, indexx }) => (
    <Cell
      item={item}
      onSelected={this.selectedAudio}
      index={indexx}
      audioSelectedIndex={this.state.audioSelectedIndex}
    />
  )


                render() {
                return (
                 <View some styles>
                  <FlatList
                    style={styles.faltList}
                    showsVerticalScrollIndicator
                    data={podcast}
                    extraData={this.state}
                    ItemSeparatorComponent={this.separator}
                    renderItem={this.renderItem}
                    />
                    </View>
                   );
                  }


Cell.js

export default class Cell extends PureComponent {
  render() {
    const { item, indexx, audioSelectedIndex } = this.props;
    return (

      <View style={styles.flatListCell}>
          <View style={styles.containerText}>
              <Text style={styles.title}>
                {item.title}
              </Text>
            </View>
          </View>
          <TouchableWithoutFeedback onPress={this.props.onSelected.bind(this, item)}>
            <Image
              style={styles.playPause}
              source={audioSelectedIndex === indexx ? res.images.play : res.images.pause}
            />
          </TouchableWithoutFeedback>
        </ImageBackground>
      </View>
    );
  }
}

Answer 1

问题是您正在解构 ({ item, indexx })，并且 renderItem 没有通过 indexx 但 index。将 indexx 更改为 index.

renderPodcastItem = ({ item, index }) => (
  <Cell
    item={item}
    onSelected={this.selectedAudio}
    index={index}
    audioSelectedIndex={this.state.audioSelectedIndex}
  />
)

第二个错误，你这样做 const { item, indexx, audioSelectedIndex } = this.props; 但你没有将 indexx 传递给 index 而是 Cell。在 Cell 组件中更改为.

const { item, index, audioSelectedIndex } = this.props;

第三个错误，您将 this.renderItem 传递给 renderItem 但函数未定义。

renderItem={this.renderPodcastItem}

DEMO

如何更改 flatlist renderitem 中的特定索引图像在有条件的情况下反应本机

How to change particular index image in flatlist renderitem react native on conditional

react-native

audio-player

react-native-flatlist