Добавить постоянное представление для RNN внутри контроллера TabBar

Question

Я хочу добавить постоянное представление внутри панели вкладок, как показано ниже в приложении Apple Music.

В настоящее время я могу добавить этот компонент внизу каждого экрана, но было бы замечательно, если бы был способ прикрепить его к панели вкладок.так что в приложении есть только один его экземпляр, и его не нужно повторно отображать при нажатии нового экрана вкладки.Спасибо.

Answer 1

для RNN v2, я решил эту проблему, предложив @ guy.gc добавить постоянное наложение, которое загружается на первый компонент componentDidMount.

Answer 2

Вы можете сделать это, определив свой собственный TabBarComponent.

Вы можете добавить имя свойства tabBarComponent в вашем TabNavigator, как это -

export const TabBar =  TabNavigator({
    Music: Music,
    Artists: Artists,
    Composers: Composers,
    Recents: Recents,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        return <YourIconComponent color={tintColor} />
      },
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
    },
    tabBarComponent: TabBarComponent,
    tabBarPosition: 'bottom',
  }
);

И тогда вы можете определить свой собственный TabBarComponent, как это -

import React from 'react'
import { TabBarBottom } from 'react-navigation'
import { View, Text } from 'react-native'

class TabBarComponent extends React.PureComponent {
  render() {
    return (
      <View style={styles.yourTabBarContainerStyle}>
        <YourFixedComponent />
        <TabBarBottom {...this.props} />
      </View>
    )
  }
}

export default TabBarComponent;

...

Надеюсь, это поможет.