播放视频 blo

Question

React-Native 中的下一个程序允许播放视频但阻止点击按钮。我相信这是因为 position:absolute 值，但有没有办法避免这个问题？

import React, { Component } from 'react';
import Video from 'react-native-video';
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  Button,
} from 'react-native'

class App extends Component {
  state = {
    count: 0,
    message: 'Hello Everybody'
  }

  onPress = () => {
    this.setState({

      count: this.state.count + 1
    })
  }

 render() {
    return (
      <View style={styles.container}>

          <Button title={'Press me'} 
            onPress={() => {
                console.log('Boton Presionado')
                this.setState({message: 'Presiono'})
              }}
          />
          <Text>{this.state.message}</Text>
          <Video source={{uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'}}
            ref={(ref) => {
              this.player = ref
            }}                                      // Store reference
            onBuffer={this.onBuffer}                // Callback when remote video is buffering
            onError={this.videoError}               // Callback when video cannot be loaded
            style={styles.backgroundVideo}

          />


      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: '10'
  },
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  }  
})

export default App;

Answer 1

我将位置：'absolute' 更改为位置：'relative' 并添加了高度和宽度的值。

播放视频 blo

Playing of a video blo

react-native

react-native-video