13-3 RN之独立于页面的播放按钮

在这一节中，我们将实现一个独立于页面的播放按钮。我们将复用上一节的 Play 组件，并在页面外部显示该按钮。

1. 创建 PlayView 组件

在 pages/view 中创建 PlayView 组件，它将作为独立的播放按钮显示在页面上。

import React, { PureComponent } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { connect, ConnectedProps } from 'react-redux';
import Play from './Play';

const viewWidth = 50;

/**
 * 额外的播放按钮
 */
class PlayView extends PureComponent<IProps> {
  render() {
    return (
      <View style={styles.container}>
        <Play />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: viewWidth,
    height: viewWidth + 20,
    position: 'absolute',
    bottom: 0,
    left: (viewportWidth - viewWidth) / 2,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
    alignItems: 'center',
    padding: 4,
    ...Platform.select({
      android: {
        elevation: 4,
      },
      ios: {
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowOpacity: 0.85,
        shadowRadius: 5,
        shadowOffset: {
          width: StyleSheet.hairlineWidth,
          height: StyleSheet.hairlineWidth,
        },
      },
    }),
  },
});

export default PlayView;

2. 在导航容器中显示 PlayView

为了在页面外显示 PlayView 组件，我们需要在 navigator/index.tsx 中将 PlayView 添加到 NavigationContainer 中。

<NavigationContainer>
  <ModalStackScreen />
  <PlayView />
</NavigationContainer>

3. 控制播放按钮的显示

我们希望只有在需要的页面上显示播放按钮，避免在首页和频道详情页面显示。为了实现这一点，我们需要知道当前活动的页面。

在 NavigationContainer 中使用 onStateChange 回调函数来获取当前活动的页面名称，并将其传递给 PlayView 组件。

interface IState {
  activeScreenName: string;
}

class Navigator extends React.Component<any, IState> {
  constructor(props: any) {
    super(props);
    this.state = { activeScreenName: '' };
  }

  onStateChange = (state: NavigationState | undefined) => {
    if (typeof state !== 'undefined') {
      this.setState({
        activeScreenName: getActiveRouteName(state),
      });
    }
  };

  render() {
    const { activeScreenName } = this.state;
    return (
      <NavigationContainer onStateChange={this.onStateChange}>
        <ModalStackScreen />
        <PlayView activeScreenName={activeScreenName} />
      </NavigationContainer>
    );
  }
}

4. 控制 PlayView 的显示

在 PlayView 组件中，判断当前播放状态和活动页面。如果播放状态是 playing 且当前页面是 Album，则显示播放按钮。

class PlayView extends PureComponent<IProps> {
  render() {
    const { playState, activeScreenName } = this.props;
    if (playState !== 'playing' || activeScreenName !== 'Album') {
      return null;
    }
    return (
      <View style={styles.container}>
        <Play onPress={this.onPress} />
      </View>
    );
  }
}

5. 总结

在本节中，我们实现了独立于页面外的播放按钮，并通过获取当前活动页面的名称，控制在哪些页面上显示播放按钮。下一节，我们将继续完善播放按钮的功能。