15-4 RN之暂停其他音频和视频

在上一节中，我们已经实现了视频播放功能，但目前存在一个问题：点击多个视频时，这些视频会同时播放。我们需要控制只让一个视频播放。以下是实现步骤：

一、控制视频播放状态

1. 修改 Found 组件

在 Found 组件中，添加 currentId 状态，用于保存当前播放视频的 ID：

class Found extends React.PureComponent<IProps> {
  state = {
    list: [] as IFound[],
    currentId: '',
  };

  setCurrentId = (currentId: string) => {
    this.setState({
      currentId,
    });
    // 暂停音频
    if (currentId) {
      const { dispatch } = this.props;
      dispatch({
        type: 'player/pause',
      });
    }
  };

  renderItem = ({ item }: ListRenderItemInfo<IFound>) => {
    const paused = item.id !== this.state.currentId;
    return (
      <FoundItem
        item={item}
        paused={paused}
        setCurrentId={this.setCurrentId}
      />
    );
  };

  render() {
    const { list } = this.state;
    return (
      <FlatList
        data={list}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.id}
        extraData={this.state.currentId}
      />
    );
  }
}

2. 修改 FoundItem 组件

在 FoundItem 组件中，添加 paused 和 setCurrentId 属性：

interface IProps {
  item: IFound;
  paused: boolean;
  setCurrentId: (id: string) => void;
}

class FoundItem extends React.PureComponent<IProps> {
  onPause = () => {
    const { setCurrentId } = this.props;
    setCurrentId('');
  };

  onPlay = () => {
    const { item, setCurrentId } = this.props;
    setCurrentId(item.id);
  };

  render() {
    const { item, paused } = this.props;
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{item.title}</Text>
        <VideoPlayer
          paused={paused}
          source={{ uri: item.videoUrl }}
          style={styles.video}
          onPause={this.onPause}
          onPlay={this.onPlay}
        />
      </View>
    );
  }
}

二、总结

通过上述修改，我们实现了以下功能：

1. 控制视频播放状态：通过 currentId 状态，控制当前播放的视频 ID。
2. 暂停其他视频：在点击新的视频时，暂停其他视频的播放。
3. 优化性能：通过 extraData 属性，确保 FlatList 只重新渲染必要的项。