React Native - 在导航上暂停视频

Question

在我的react-native项目中，我使用react-navigation 5进行导航，使用react-native-video作为音频/视频播放器。

我的要求是，当用户导航到另一个屏幕时，音频/视频是否应该停止播放。然而，这并没有发生，音频继续播放。

我在堆栈导航器中创建了两个屏幕。视频播放器是一个单独的组件。

屏幕代码：

function MainScreen({ navigation }) {
  const [audiostatus, setAudioStatus] = useState(true);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('blur', () => {
      console.log('Leaving Home Screen');
      setAudioStatus(true);
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#fff' }}>
      <Player tracks={TRACKS} paused={audiostatus} />
      <Button
        title="Go to Screen Without Audio"
        onPress={() => navigation.navigate('No Audio Screen')}
      />
      <Button
        title="Go to Screen With Another Audio (Love Yourself)"
        onPress={() => navigation.navigate('Another Audio Screen')}
      />
    </View>
  );
}

播放器代码 在播放器内，我收到暂停属性来决定视频是否应该已经播放或暂停。然后播放器可以通过更改状态来控制播放。

export default class Player extends Component {
  constructor(props) {
    super(props);

    this.state = {
      paused: props.paused,
      totalLength: 1,
      currentPosition: 0,
      selectedTrack: 0,
      repeatOn: false,
      shuffleOn: false,
    };
  }


  setDuration(data) {
    this.setState({totalLength: Math.floor(data.duration)});
  }

  setTime(data) {
    this.setState({currentPosition: Math.floor(data.currentTime)});
  }

  seek(time) {
    time = Math.round(time);
    this.refs.audioElement && this.refs.audioElement.seek(time);
    this.setState({
      currentPosition: time,
      paused: false,
    });
  }

  render() {
    const track = this.props.tracks[this.state.selectedTrack];
    const video = this.state.isChanging ? null : (
      <Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
        ref="audioElement"
        paused={this.state.paused}               // Pauses playback entirely.
        resizeMode="cover"           // Fill the whole screen at aspect ratio.
        repeat={false}                // Repeat forever.
        onLoadStart={this.loadStart} // Callback when video starts to load
        onLoad={this.setDuration.bind(this)}    // Callback when video loads
        onProgress={this.setTime.bind(this)}    // Callback every ~250ms with currentTime
        onEnd={this.onEnd}
        onError={this.videoError}
        style={styles.audioElement}
        audioOnly={true} />
    );

    return (
      <View style={styles.container}>
        <SeekBar
          onSeek={this.seek.bind(this)}
          trackLength={this.state.totalLength}
          onSlidingStart={() => this.setState({paused: true})}
          currentPosition={this.state.currentPosition} />
        <Controls
          onPressPlay={() => this.setState({paused: false})}
          onPressPause={() => this.setState({paused: true})}
          paused={this.state.paused}/>
        {video}
      </View>
    );
  }
}

问题是，一旦用户开始播放视频，然后如果他导航到另一个屏幕，视频就会继续播放。我想让视频暂停。在屏幕中，我添加了 useEffect() 来设置音频状态以在屏幕模糊时暂停，但没有任何反应。视频继续播放。请帮忙。

Answer 1

具有功能组件和钩子的简单解决方案是使用

使用重点

它返回 true 或 false，并在更改时重新渲染组件，使用以下命令导入它

import { useIsFocused } from '@react-navigation/native';

 const screenIsFocused = useIsFocused();

如果您正在使用“react-native-video”或任何其他需要类似内容的库

已暂停

您可以使用

 paused={isPaused || (!screenIsFocused )}

视频仅在未暂停并且屏幕也处于焦点状态时才会运行