Как изменить определенный индекс изображения в плоском списке рендерит реагировать нативно на условно - PullRequest
Новая
       36

Как изменить определенный индекс изображения в плоском списке рендерит реагировать нативно на условно

1 голос
/ 30 июня 2019

Я показываю некоторые аудио данные в плоский список.Плоский список, который я показываю в основном классе, но RenderItem вызывает в отдельном классе.Итак, после того, как я нажал на конкретный элемент строки, я играю аудио файл.Но я должен изменить паузу для воспроизведения изображения.Но, когда я попытался изменить его, все изображения получают изменения.По умолчанию, я показываю все изображения ячеек со значком паузы.

Кроме того, как только пользователь нажмет на воспроизведение / пауза в аудиоплеере, тогда мне придется поменять плоский список изображений строки текущего воспроизводимого элемента либо на воспроизведение / паузу.

Я показываю аудиоплеер внизу экрана.После того, как пользователь нажал на иконку паузы с плоским списком, я воспроизводил аудиоплеер в нижней части экрана.

Я устал, но все изображения в ячейках меняются.Любые предложения?

Примечание: у нас есть другой пользовательский интерфейс для аудиоплеера, поэтому я создал пользовательский интерфейс для проигрывателя вместо медиа-компонента по умолчанию.

Основной класс.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>
    );
  }
}

1 Ответ

1 голос
/ 30 июня 2019

Проблема в том, что вы деструктурируете ({ 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

...