Создать липкий компонент для нижней вкладки с реагирующей навигацией

Question

Цель: Сделать Player Component состоящим из состояния при переключении между нижними вкладками, Home и Settings в реагирующей навигации, используя createBottomTavNavigator.

Я пытался использовать *Компонент 1009 * в компонентах Home и Setting. Но у меня есть проблема с тем, что когда я изменяю текст на экране Player, нажимая кнопку, когда я нахожусь внутри компонента Home, а затем переключаюсь на вкладку Settings, текст, введенный на экране Home, неперенесено на экран Settings. Я думаю, это потому, что компонент Settings импортирует новый компонент Player.

Итак, мой вопрос заключается в том, как сделать компонент Player с состоянием при переключении между этими двумя нижними вкладками?

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

Экспо-закуска здесь !

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Player />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Player />
      </View>
    );
  }
}

class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text : 'text'
    }
  }

  changeText = () => {
    this.setState({
      text: 'hello'
    })
  }

  render() {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Text>{this.state.text}</Text>
        <Button
          title="Press"
          onPress={() => this.changeText()}/>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

Как воспроизвести проблему

1. В Home нажмите кнопку Press, которая изменит текст в компоненте Player.

2. Перейдите на вкладку Settings внизу. Теперь текст, введенный на экране Home, исчез!