Reactnative 为什么当我更换屏幕时playground 音乐不会停止

Reaction本机导航生命周期不像Reaction那样工作，您需要监听焦点和模糊事件来检测组件是否被隐藏或显示，如下所示:

  useEffect(() => {
    const subscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
      console.log('play sound');

      controller.playBackgroundMusic();
    });

    const unsubscribe = navigation.addListener('blur', () => {
      // Screen was blurred
      // Do something
      console.log(' Start game cleanup executed');
      controller.stopBackgroundMusic();
    });

    return unsubscribe;
  }, []);

您可以在以下位置了解更多信息:

https://reactnavigation.org/docs/navigation-lifecycle/

这是一个如何使用原生react 播放和停止背景音乐的小演示:

SandBox :https://snack.expo.dev/EjVXFzojr

App.js

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

// or any files within the Snack
import GameScene from './components/GameScene';
import IntroScene from './components/IntroScene';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Intro"
          component={IntroScene}
          options={{title: 'Intro'}}
        />
        <Stack.Screen name="Game" component={GameScene} options={{title: 'Game'}} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

./Controls/AudioController.js

import {Audio} from "expo-av"

class AudioController {
  constructor() {
    this.backgroundMusic = new Audio.Sound();
  }

  loadAndPlay = async (audioObject, audioFile, loop = false, volume = 1.0) => {
    try {
      await audioObject.loadAsync(audioFile);
      audioObject.setIsLoopingAsync(loop);
      audioObject.setVolumeAsync(volume);
      await audioObject
        .playAsync()
        .then(async (playbackStatus) => {
          if (!loop) {
            setTimeout(() => {
              audioObject.unloadAsync();
            }, playbackStatus.playableDurationMillis);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } catch (error) {
      console.log(error);
    }
  };

  playBackgroundMusic = async () => {

    await this.loadAndPlay(
      this.backgroundMusic,
      require('../assets/FitGirl-Repacks.mp3'),
      true,
      1
    ); // Loop and set the volume to 50%
  };

  stopBackgroundMusic = async () => {
    try {
      await this.backgroundMusic.stopAsync();
      await this.backgroundMusic.unloadAsync();
    } catch (error) {
      console.log(error);
    }
  };
}
export function audioController(){
  return new AudioController()
}

./Components/IntroScene.js

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import { audioController } from '../controllers/AudioController';

export default function IntroScene({ navigation }) {
  const startHandler = (event) => {
    navigation.navigate('Game');
  };

  const controller = audioController();

  useEffect(() => {
    const subscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
      console.log('play sound');

      controller.playBackgroundMusic();
    });

    const unsubscribe = navigation.addListener('blur', () => {
      // Screen was focused
      // Do something
      console.log(' Start game cleanup executed');
      controller.stopBackgroundMusic();
    });

    return unsubscribe;
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>Intro Game</Text>
      <Button title="start" onPress={(event) => startHandler(event)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

./Components/GameScene.js

import { Text, View, StyleSheet, Image } from 'react-native';

export default function GameScene() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Play The Game
      </Text>
      <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 128,
    width: 128,
  }
});