Question

我正在构建与视频相关联的移动应用程序，并且更像是Snapchat发现。我想在视频上添加onPress函数，所以当用户按下它时，它将转到下一个视频。

所以我渲染这样的视频。

return (
  <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
    {this.state.buffering && <ActivityIndicator size="large"/>}
    {this.video()}
  </View>
);

但是，当我尝试向其中添加Touchableopacity以便能够将其按到视频时，视频是不可见的。我听到了视频的声音，但是看不见。

return (
  <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
    {this.state.buffering && <ActivityIndicator size="large"/>}
    <TouchableOpacity onPress={this.continue.bind(this, 1)}>
      {this.video()}
    </TouchableOpacity>
  </View>
);

和视频功能：

return (
  <Video
    source={{uri: 'http://' + this.state.videos[this.state.plamount].video_path}}
    resizeMode="cover"
    paused={this.state.pause}
    style={StyleSheet.absoluteFill}
    onLoad={() => this.setState({buffering: false})}
    repeat={true}
    onError={() => Actions.reset('main')}
  />
)

Answer 1

好吧，我找到了答案。也可以有其他答案，但是当我改变

来自

return (
  <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
    {this.state.buffering && <ActivityIndicator size="large"/>}
    {this.video()}
  </View>
);

到

<TouchableOpacity onPress={this.continue.bind(this, 1)} style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
   {this.state.buffering && <ActivityIndicator size="large"/>}
   {this.continue()}
</TouchableOpacity>

它工作了..但是无论如何，仍然存在一个问题，为什么视频不可见，如果在视频周围还有一个包装呢？。

React-Native-Video如何添加onPress？

1 个答案: