Глобальный компонент в React Native Navigation

Question

Я хочу создать приложение проигрывателя musi c, в котором свернут проигрыватель musi c в нижней части экрана, над нижними вкладками, аналогично тому, как оно есть у Spotify и Apple Musi c. Я просто хочу посмотреть, как бы вы сделали макет в этом случае. Любая помощь приветствуется.

Answer 1

Вы можете создавать собственные вкладки с дополнительным видом, который отображает управление вашим плеером. Например, создайте CustomTabBar. js, как показано ниже:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class CustomTabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View>
        <View style={{height: 50}}>
          {/* Player controller view */}
        </View>
        {/* Custom Tab view */}
      </View>
    );
  }
}

export default CustomTabBar;

Вышеуказанный компонент будет содержать контроллер игрока и пользовательские вкладки. Теперь вы можете использовать его с createMaterialTopTabNavigator. Например:

const HomeTabNavigator = createMaterialTopTabNavigator({
  Home: {
    screen: HomeStackNavigator,
  },
  Search: {
    screen: SearchStackNavigator
  },
  Library: {
    screen: Library,
  },
}, {
  ...,
  ...
  tabBarComponent: (props) => <CustomTabBar {...props} />, // use your custom tab layout
  ...
  ...
  },
});

Теперь управление вашим плеером будет отображаться на всех ваших страницах с вкладками. Однако, если вы хотите использовать анимационный эффект, такой как spotify или apple musi c, тогда вам нужно использовать пан-ответчик в виде контроллера игрока.