React Native Navigation 中的全局組件

Question

我想創建一個音樂播放器應用程序，它在屏幕底部、底部選項卡上方折疊了音樂播放器，類似於 Spotify 和 Apple Music 擁有它的方式。 我只是想看看在這種情況下你會如何進行布局。 任何幫助表示贊賞。

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 或蘋果音樂等動畫效果，則必須在播放器控制器視圖中使用平移響應器。