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

Question

I'm using Expo with React Native, testing on the Android simulator on a Galaxy S8+.

I'm using the Video component from the Expo library, as I couldn't get react-native-video to work.

I'm using the following code: <Video style={styles.video} source={{ uri: url }} isMuted={false} shouldPlay isLooping usePoster={true} useNativeControls={false} resizeMode="contain" />

styles.video is simply {width: window.width, height: 650}

Which displays the following: Screenshot of issue

But, if you load the video in, it actually fits the whole window and is sized the way I want, but only for half a second. After that it immediately goes small like in the screenshot. I've tried cover and center as well, and it hasn't worked. Any help would be appreciated.

Edit: More Details:

What I want it to look like is something like this, which I have working for images: Image of what it should look like

With images, I'm using the default Image component from React Native in the following way: <Image style={styles.image} source={{ uri: data.url }} resizeMode="contain" />

And styles.images is identical to styles.video at the moment.

Answer 1

resizeMode="contain" for the video

And flex:1 for the style

Answer 2

According to your Screen, your front-end could be designed like this.

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>
 )

Do not forget to import TouchableOpacity !

Hope I could help you. Do comment if need more assistance.