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

Question

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

我正在使用 Expo 库中的

Video

组件，因为我无法让

react-native-video

工作。

我正在使用以下代码：

<Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />

styles.video

简直就是

{width: window.width, height: 650}

显示以下内容：

但是，如果您加载视频，它实际上适合整个窗口并且大小符合我的要求，但只有半秒钟。之后它立即变小，就像屏幕截图中那样。我也试过

cover

和

center

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

编辑：更多细节：

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

对于图像，我通过以下方式使用 React Native 中的默认

Image

组件：

<Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />

而

styles.images

目前与

styles.video

相同。

Answer 1

resizeMode="contain"

视频

和

flex:1

的风格

Answer 2

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

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！

Answer 3

您可以使用另一个属性

videoStyle

，它可以让您直接设置视频组件的样式。

将您的样式添加到该属性，它应该可以工作

<Video ... videoStyle={{width: window.width, height: 650}} />