A-ANing / react-native-rn-videoplayer

基于react-native-video的视频播放器(上下滑动改变音量屏幕亮度,缓冲进度,双击暂停等ios Android)
95 stars 40 forks source link

Android视频无法铺满。iOS 没问题 #4

Closed zinete closed 4 years ago

zinete commented 4 years ago

其他问题都解决了,现在又出现新问题了。如图 https://imgchr.com/i/aOWGJH

A-ANing commented 4 years ago

你看看我的文档 最上面有写这个问题,就是视频没居中的那个问题。

A-ANing commented 4 years ago

https://github.com/react-native-community/react-native-video/issues/2046

zinete commented 4 years ago

感谢回复。这个问题已经解决了。还有一个问题,我昨天看了半天没解决。就是视频从全屏恢复到小屏幕会导致 状态栏颜色发生变化。或者 底部 虚拟 按键直接消失了

A-ANing commented 4 years ago

有gif吗

zinete commented 4 years ago

录了个视频,你帮忙看看 https://cowtransfer.com/s/d453d0bbf5304c

A-ANing commented 4 years ago

我发现你首次进入小窗口播放的时候,隐藏了状态栏是吧,然后全屏切换到小屏后(默认的返回小屏会展示状态栏)显示了状态栏白底黑字。 首先这个我这边默认的是小窗口状态栏是:显示,黑底白字,因为有些安卓手机又刘海。挖孔屏等。 以上的问题你得看你的需求来改代码了。

再就是我看到你返回小屏底部手机的功能键隐藏了,是通过你app主页的视频(主页视频不是用的这个)直接点击的全屏,我不知道你这个中间的代码是什么,干了什么,是怎么直接从主页的视频直接到全屏播放的。

zinete commented 4 years ago

是的。进入小窗口播放隐藏了状态栏。那估计是返回的时候状态栏有显示了导致的。 主页的视频列表是用我自己用video组件做的。然后给了一个点击事件 调用 this.player.changeWindows(true); 跳转到你这个组件来实现全屏播放的。列表内的视频感觉全屏不好做

zinete commented 4 years ago

如果要改 默认小屏状态栏的颜色 需要改哪里的代码

A-ANing commented 4 years ago

我能看看主页直接到全屏的代码吗。

zinete commented 4 years ago

全屏的代码 import React from 'react'; import {View, StatusBar} from 'react-native'; import BaseComponent from '../base/BaseComponent';

import Video from 'react-native-rn-videoplayer';

export default class VideoFullScreenPage extends BaseComponent { constructor(props) { super(props); this.state = { uri: this.props.navigation.getParam('uri', ''), title: this.props.navigation.getParam('title', ''), duration: this.props.navigation.getParam('duration', 0), //时间 currentTime: this.props.navigation.getParam('currentTime', 0), //当前时间 videoPoster: this.props.navigation.getParam('videoPoster', null) //当前时间 }; } componentDidMount() { this.player.changeWindows(true); } renderContent() { return ( <Video navigation={this.props.navigation} goBack={() => this.props.navigation.goBack()} onSmallBack={() => this.props.navigation.goBack()} storeComponent={() => null} continuous={false} moreSetting={() => null} ref={(ref) => (this.player = ref)} poster={this.state.videoPoster} url={this.state.uri} /> ); } }

zinete commented 4 years ago

主页直接调用 this.props.navigation.push 传参跳转进来的。没做其他操作

A-ANing commented 4 years ago

如果要改 默认小屏状态栏的颜色 需要改哪里的代码

/view/index.js的Header组件 return 一个null 或者空view都行 然后看你要不要隐藏状态栏切换到小屏的根index.js的 setSmall 方法中 注释 StatusBar.setHidden(false);

A-ANing commented 4 years ago

收到 我测试下给你答复

zinete commented 4 years ago

好的 谢谢

A-ANing commented 4 years ago

我知道问题啦。你fork后你那边自己定义了一个goBack()方法, 你的goBack没有写还原手机底部功能按钮哦,你得在goBack内修改成如下

if (typeof this.props.goBack === 'function') {
   Platform.OS === 'android' &&  NativeModules.HideBottomNa.show();//这行
   this.props.goBack();
 }

或者在componentWillUnmount里面。

因为我没有考虑全屏直接返回上个页面;我这边如下(感谢兄台分享的网站): https://imgchr.com/i/az4JKg

zinete commented 4 years ago

好的,非常感谢。我这边不知道为啥 全屏切换到小屏后状态栏总是显示白底白字。我也没有设置这也颜色(手动摊手)

A-ANing commented 4 years ago

好的,非常感谢。我这边不知道为啥 全屏切换到小屏后状态栏总是显示白底白字。我也没有设置这也颜色(手动摊手)

如果返回还是白底黑字,那你在返回后代码里面手动StatusBar.setHidden(true);一下,因为我java代码NativeModules.HideBottomNa.show()会显示状态栏; 哈哈哈哈,所以不太符合你这边的需求,你得返回后手动StatusBar.setHidden(true);

A-ANing commented 4 years ago

加个微信否? xn839650216

zinete commented 4 years ago

谢谢。已添加

zinete commented 4 years ago

谢谢。已添加