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

目标：使用

CreateBoottomtavnavigator

在react导航中的底部选项卡、

Home

和

设置之间切换时，使
播放器组件处于状态

我已经尝试在
Home
和
Setting
组件中使用
Player
组件。但我有一个问题，当我在
Home
组件中单击按钮，然后切换到
设置
选项卡，在
Home
屏幕中更改
播放器
屏幕中的文本时，我在
设置
屏幕中输入的文本不会被带入
屏幕。我猜这是因为
Settings
组件导入了一个新的
Player
组件

因此，我的问题是，在这两个底部选项卡之间切换时，如何使
播放器
组件有状态

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


世博快餐

从“React”导入React；
从“react native”导入{文本、视图、按钮}；
从“react navigation”导入{createAppContainer}；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
回家！
);
}
}
类设置屏幕扩展React.Component{
render（）{
返回(
设置！
);
}
}
类播放器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“文本”
}
}
changeText=（）=>{
这是我的国家({
短信：“你好”
})
}
render（）{
返回(
{this.state.text}
this.changeText（）}/>
);
}
}
const TabNavigator=createBottomTabNavigator({
主屏幕：{屏幕：主屏幕}，
设置：{屏幕：设置屏幕}，
});
导出默认createAppContainer（TabNavigator）；

如何重现问题

1。在
主页
中，单击
按
按钮，该按钮将更改
播放器
组件中的文本

2.进入底部的
设置
选项卡。现在，您在
主页
屏幕中输入的文本消失了
 
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>
            ),
          }
    );

从'react navigation tabs'导入{createBottomTabNavigator，BottomTabBar}；
常量TabBarComponent=props=>；
const TabScreens=createBottomTabNavigator(
{
//其他屏幕
},
{
tabBarComponent:props=>(
),
}
);

此处相关：
您能检查一下这个问题吗？如果您解决了这个问题，您能在点心上分享吗！！
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>
            ),
          }
    );