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

Question

目标：使用describe('open()', () => { // it('should open the dialog', () => { // get rid of this const testCases = [ ... 在反应导航的底部选项卡Player Component和Home之间切换时，使Settings处于有状态状态。

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

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

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

博览会小吃here！

Spotify

如何重现问题

1。。在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); 中，单击Home按钮，这将更改Press组件中的文本。

2。。转到底部的Player标签。现在您在Settings屏幕上输入的文本消失了！

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