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

Apple Music

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

1
dmathewwws 17 Сен 2018 в 21:42

2 ответа

Лучший ответ

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

0
dmathewwws 18 Сен 2018 в 22:39

Вы можете сделать это, определив свой собственный 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;

...

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

1
Arpit Kapadia 17 Сен 2018 в 19:51