Javascript Expo/React Native:视频无法调整大小

我正在使用Expo和React Native，在Galaxy S8+上的Android模拟器上进行测试

我正在使用世博图书馆的

Video

组件，因为我无法使用

react native Video

我正在使用以下代码：

style.video

只是

{width:window.width，height:650}

其中显示以下内容：

但是，如果你加载视频，它实际上适合整个窗口，大小是我想要的，但只有半秒钟。之后，它立即变小，如截图所示。我也试过

cover

和

center

，但都没用。任何帮助都将不胜感激

编辑：更多详细信息：

我希望它看起来像这样，我为图像工作：

对于图像，我使用React Native的默认

Image

组件，方法如下：

---

和

样式。图像

与当前的

样式相同。视频

。

根据您的屏幕，您的前端可以这样设计

return(
   <View style={{ width: "100%",height: "100%", flex: 1}}>
      <View style={{flex:0.7,justifyContent:'center'}}>
          <Video
           source={{ uri: url }}
           isMuted={false} 
           shouldPlay
           isLooping
           usePoster={true} 
           useNativeControls={false}
           />
       </View>
      <View style={{flex:0.1}}/>
      <TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
           <View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
            <Text>Next</Text>
           </View>
      </TouchableOpacity>
   </View>
 )

返回(
下一个
)

不要忘记导入TouchableOpacity

---

希望我能帮助你。如果需要更多帮助，请发表评论。

根据您的屏幕，您的前端可以这样设计

return(
   <View style={{ width: "100%",height: "100%", flex: 1}}>
      <View style={{flex:0.7,justifyContent:'center'}}>
          <Video
           source={{ uri: url }}
           isMuted={false} 
           shouldPlay
           isLooping
           usePoster={true} 
           useNativeControls={false}
           />
       </View>
      <View style={{flex:0.1}}/>
      <TouchableOpacity style={{flex:0.1,paddingHorizontal:10}}>
           <View style={{width:"100%",justifyContent:"center",alignItems:"center",backgroundColor:"blue"}}>
            <Text>Next</Text>
           </View>
      </TouchableOpacity>
   </View>
 )

返回(
下一个
)

不要忘记导入TouchableOpacity

希望我能帮助你。如果需要更多帮助，请发表评论。

resizeMode=“contain”

用于视频

和

flex:1

用于视频的样式

resizeMode=“contain”

---

---

和

flex:1

对于样式

是否应以像素为单位指定高度？高度：650px请分享您的屏幕设计示例，或指明您要将视频播放器放置在何处！另外，应该是window.innerWidth吗？与window.width@Ron不同，我在原始帖子中添加了一些澄清细节，并提供了大致的屏幕截图。@CarolMcKay使用数字/“window.width”在React Native上工作，至少以我的经验/据我所知。高度是否应以像素为单位指定？高度：650px请分享您的屏幕设计示例，或指明您要将视频播放器放置在何处！另外，应该是window.innerWidth吗？除了window.width@Ron之外，我在原始帖子中添加了一些澄清细节，并提供了大致的屏幕截图。@CarolMcKay使用数字/“window.width”在React Native上工作，至少以我的经验/据我所知。谢谢你的回复，但是当我尝试这个实现时，我发现，如果我将高度设置为100%或自动，视频根本无法播放。视频元素刚刚消失。好的，按我上面的代码原样使用并检查。不要给出高度。同样的结果，当我没有给出高度时，组件就消失了，“下一步”按钮跳到页面顶部（因为组件的高度似乎为0）。我再次尝试，仍然无法使其工作。这就像忽略我告诉它拉伸，而只是以本机大小播放。谢谢你的回复，但当我尝试此实现时，我发现如果我将高度设置为100%或自动，视频根本无法播放。视频元素刚刚消失。好的，按我上面的代码原样使用并检查。不要给出高度。同样的结果，当我没有给出高度时，组件就消失了，“下一步”按钮跳到页面顶部（因为组件的高度似乎为0）。我再次尝试，仍然无法使其工作。这就像无视我告诉它伸展，而只是在玩本机大小。你的答案一点也不清楚。请详细说明。需要设置视频“resizeMode”的道具。在IOS中，它默认为“包含”，但在android中，它不包含，需要显式设置，否则视频将无法缩放到它所在的视图。你的答案一点也不清楚。请详细说明。需要设置视频“resizeMode”的道具。在IOS中，它默认为“contain”，但对于android，它没有，需要显式设置，否则视频将无法缩放到它所在的视图。