javascript - 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 或苹果音乐这样的动画效果，那么您必须在播放器控制器视图中使用平移响应器。