为带有反应导航的底部标签创建粘性组件

Question

目标：使用Player Component在反应导航的底部选项卡，Home和Settings之间切换时，使createBottomTavNavigator处于有状态。

我已经尝试在Player和Home组件中同时使用Setting组件。但是我有一个问题，当我在Player组件内部时通过单击按钮来更改Home屏幕中的文本，然后切换到Settings选项卡时，我在Home屏幕中输入的文本不是转到Settings屏幕。我猜这是因为Settings组件导入了一个新的Player组件。

所以我的问题是，在两个底部选项卡之间切换时，如何使Player组件处于有状态？

我有点希望在Spotify应用中构建一个播放器，当我在下面的底部选项卡之间切换时，该播放器保持有状态，如下图所示。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9uYjl0MWg2LmpwZyJ9” alt =“ 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屏幕中输入的文本消失了！

目标：使用createBottomTavNavigator在反应导航的底部选项卡，“主页”和“设置”之间切换时，使播放器组件处于有状态。我尝试过在两个Home中都使用Player组件...

Answer 1

tabBarComponent是您所需要的：