使用反应导航为底部选项卡创建粘性组件

Question

目标：使用createBottomTavNavigator在底部标签之间切换时使Player Component有状态，Home和Settings在反应导航中使用createBottomTavNavigator。

我尝试在Home 和Setting 组件中使用Player 组件。但是我有一个问题，当我在Home 组件内部时单击按钮更改Player 屏幕中的文本，然后切换到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