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

baubqpgj 于 2022-12-04 发布在 React

关注(0)|答案(2)|浏览(171)

我正在使用世博会与React Native，测试Android模拟器上的Galaxy S8+。
我正在使用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是相同的。

react-native

来源：https://stackoverflow.com/questions/53493882/expo-react-native-video-failing-to-resize

2条答案

按热度按时间

nom7f22z1#

视频为resizeMode="contain"
和flex:1的样式

赞(0）回复(0）举报 2022-12-04

yjghlzjz2#

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

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！

赞(0）回复(0）举报 2022-12-04

我来回答

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

2条答案

相关问题

热门标签

最新问答