如何在React Native中实现PIP(画中画)模式?

svmlkihl  于 2022-12-04  发布在  React
关注(0)|答案(1)|浏览(334)

我需要实现PIP模式使用React Native,但它应该更新日期每秒钟,而用户进入PIP模式。
我尝试使用以下软件包,但不工作:react-native-pip-androidreact-native-picture-in-picture显示器

z3yyvxxp

z3yyvxxp1#

RN不提供实现PIP模式的内置API,所以你唯一的选择是react-native-video包,它提供了一个PIP prop ,可以用来在iOS和Android上启用PIP模式的视频播放。

import Video from 'react-native-video';

class MyComponent extends React.Component {
  render() {
    return (
      <Video
        source={require('./my-video.mp4')}
        PIP
      />
    );
  }
}

因此,PIP prop设置为true以启用视频的PIP模式。但此prop仅在iOS和Android上支持,在其他平台上不支持动画。
要在用户处于PIP模式时每秒更新一次日期,可以使用setInterval方法调用定期更新日期得函数.然后可以使用文本组件在屏幕上显示更新得日期.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        date: new Date(),
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { date } = this.state;
    return (
      <View>
        <Video
          source={require('./my-video.mp4')}
          PIP
        />
        <Text>{date.toString()}</Text>
      </View>
    );
  }
}

方法的作用是:调用一个每秒更新一次日期状态的函数。2这会导致屏幕上的日期更新,从而允许用户在PIP模式下看到当前时间。

相关问题