我需要实现PIP模式使用React Native,但它应该更新日期每秒钟,而用户进入PIP模式。我尝试使用以下软件包,但不工作:react-native-pip-androidreact-native-picture-in-picture显示器
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模式下看到当前时间。
1条答案
按热度按时间z3yyvxxp1#
RN不提供实现PIP模式的内置API,所以你唯一的选择是react-native-video包,它提供了一个PIP prop ,可以用来在iOS和Android上启用PIP模式的视频播放。
因此,PIP prop设置为true以启用视频的PIP模式。但此prop仅在iOS和Android上支持,在其他平台上不支持动画。
要在用户处于PIP模式时每秒更新一次日期,可以使用setInterval方法调用定期更新日期得函数.然后可以使用文本组件在屏幕上显示更新得日期.
方法的作用是:调用一个每秒更新一次日期状态的函数。2这会导致屏幕上的日期更新,从而允许用户在PIP模式下看到当前时间。