React Native Navigation 中的全局组件答案

【问题标题】：Global component in React Native NavigationReact Native Navigation 中的全局组件
【发布时间】：2020-02-01 03:51:00
【问题描述】：

我想创建一个音乐播放器应用，它在屏幕底部、底部选项卡上方折叠音乐播放器，类似于 Spotify 和 Apple Music 的做法。我只是想看看在这种情况下您将如何进行布局。任何帮助表示赞赏。

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation react-native-navigation-v2

【解决方案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 music 这样的动画效果，那么您必须在播放器控制器视图中使用平移响应器。

【讨论】：

我想使用 wix 的 react native 导航，而不是 react-navigation
好的，所以也会有同样的方法。您必须创建自定义标签栏来显示标签以及播放器控件。
我对此表示怀疑。我认为不可能为这个库创建自定义底部标签栏。
我从未使用过 wix 导航，所以对此我不了解。对不起！！！