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

Question

我正在使用带有 React Native 的 Expo，在 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}

显示以下内容：Screenshot of issue

但是，如果您将视频加载进去，它实际上适合整个窗口，并且按我想要的方式调整大小，但只有半秒。之后它会立即变小，就像屏幕截图中一样。我也试过cover 和center，但没有奏效。任何帮助将不胜感激。

编辑：更多细节：

我希望它看起来像这样，我正在为图像工作：Image of what it should look like

对于图像，我通过以下方式使用来自 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 ！

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