Попытка синглтона для React-Native

Question

Я пытаюсь узнать, как создать одноэлементный экземпляр, который будет содержать значение, которое затем будет использоваться в состоянии определенного компонента.Например, скажем, я хочу создать компонент AudioControl, который содержит воспроизведение / паузу, которая изменит состояние, если приложение воспроизводит музыку или нет.Теперь также скажите, что мы используем несколько экранов, в которые мы встраиваем компонент.Хотя каждый экран будет содержать свой собственный экземпляр AudioControl, я бы хотел, чтобы state.playing для этого компонента происходил из одноэлементного класса, в котором хранится это значение.

У меня что-то работает, но только на полпути.Это работает, если я запускаю приложение (нажмите кнопку воспроизведения, а затем перейдите к следующему экрану, чтобы увидеть, изменился ли этот компонент AudioControl. Однако, если я запускаю приложение, а затем переключаю вкладки перед нажатием кнопки воспроизведения, а затем нажимаю кнопку «Воспроизвести» на другом экране.Это не меняет состояние другого аудио компонента.

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

Мой код (App.js):

import React, { Component } from "react";
import { View, Text, Button} from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";

class AudioManager {

  static _instance;

  playing = false;

  static getInstance = () => {
    if (AudioManager._instance == null) {
      AudioManager._instance = new AudioManager()
    }
    return this._instance;
  }

}

let commonAudioManager = AudioManager.getInstance()


class AudioControls extends Component {

  constructor(props) {
    super(props)
    this.state = {
      playing: commonAudioManager.playing
    }
  }

  play = () => {
    commonAudioManager.playing = true
    this.setState({
      playing: commonAudioManager.playing
    })
  }

  pause = () => {
    commonAudioManager.playing = false
    this.setState({
      playing: commonAudioManager.playing
    })
  }

  render() {
    return (
      <View>
        <Text>Playing: {this.state.playing ? "Yes" : "No"}</Text> 
        { this.state.playing ? <Button title="Pause" onPress={this.pause} /> : <Button title="Play" onPress={this.play} /> }
      </View>
    )
  }
}

class HomeScreen extends Component {
  static navigationOptions = {
    title: "Home"
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center"}}>
        <AudioControls />
      </View>
    )
  }
}

class AudioScreen extends Component {
  static navigationOptions = {
    title: "Audio"
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center"}}>
        <AudioControls />
      </View>
    )
  }
}

const navigatorStack = createBottomTabNavigator({
  Home: HomeScreen,
  Audio: AudioScreen
})

export default createAppContainer(navigatorStack)