react-native - 使用 react 导航为底部选项卡创建粘性组件

Question

目标:制作 Player Component在底部选项卡之间切换时有状态，Home和 Settings在 react 导航中，使用 createBottomTavNavigator .
我试过使用 Player Home 中的组件和 Setting成分。但是当我更改 Player 中的文本时，我遇到了问题当我在里面时单击按钮来显示屏幕 Home组件，然后切换到 Settings选项卡，我在 Home 中输入的文本屏幕未结转至 Settings屏幕。我猜是因为Settings组件导入新 Player成分。
所以我的问题是如何制作 Player在这两个底部选项卡之间切换时组件有状态吗？
我有点希望建立一个像 Spotify 那样的播放器当我在这些底部选项卡之间切换时，播放器保持有状态的应用程序，如下图所示。

世博小吃here !

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 中输入的文本画面没了!

Answer 1

tabBarComponent是你所需要的全部:

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = props => <BottomTabBar {...props} />;

    const TabScreens = createBottomTabNavigator(
          {
            // other screens
          },
          {
            tabBarComponent: props => (
              <View>
                  <YourPlayerComponent />
                  <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
              </View>
            ),
          }
    );

相关链接:https://reactnavigation.org/docs/pt-BR/bottom-tab-navigator.html