如何以网格布局显示视频并在按下 React Native 时播放

Question

我正在网格布局中显示一组图像。但是，当我将视频 url 添加到相同的内容时，网格布局中不会显示任何内容。我看到的只是一个空白区域。如何将视频添加到网格布局并按模态播放？

我的 GridLayout 代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableWithoutFeedback, Modal, Dimensions, ScrollView} from 'react-native';

import ImageElement from './ImageElement';

export default class GridLayoutSample extends Component{
  constructor(){
    super()
  this.state={
    modalVisible: false,
    modalImage: require('./download (1).jpeg'),
    images:[
      require('./download.png'),
      require('./android/app/img/51049911-nice-france-august-15-2015-subway-fast-food-restaurant-interior-subway-is-an-american-fast-food-rest.jpg'),
      require('./android/app/img/dominos.jpg'),
      require('./android/app/img/0.jpeg'),
      //{ uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg" },
                //{ url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                //{ URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
    ]
  }
}

setModalVisible(visible, imagekey){
  this.setState({modalImage: this.state.images[imagekey]});
  this.setState({modalVisible: visible});
}

getImage(){
  return this.state.modalImage;
}
  render(){
    let images = this.state.images.map((val,key) => {
      return<TouchableWithoutFeedback key={key}
      onPress={()=> {this.setModalVisible(true, key)}}>
      <View style={styles.imagewrap}>
      <ImageElement imgsource={val}></ImageElement>
      </View>
      </TouchableWithoutFeedback>
    });
    return(
      <View style={styles.container}>


      <Modal style={styles.modal} animationType={'fade'}
      transparent={true} visible={this.state.modalVisible} onRequestClose={()=>{}}>

      <View style={styles.modal}>
      <Text style={styles.text} onPress={()=>{
        this.setModalVisible(false)}}>Close</Text>
        <ImageElement imgsource={this.state.modalImage}></ImageElement>   
      </View>

      </Modal>
      {images}
      </View>
    )
  }
}

const styles = StyleSheet.create({
container:{
  flex: 1,
  flexDirection: 'row',
  flexWrap: 'wrap',
  backgroundColor: '#eee',
},
imagewrap:{
  margin: 2,
  padding: 2,
  height: (Dimensions.get('window').height/3)-12,
  width: (Dimensions.get('window').width/2)-4,
  backgroundColor: '#fff',
},
modal:{
  flex:1,
  padding: 40,
  backgroundColor: 'rgba(0,0,0, 0.9)',
},
text:{
  color: '#fff',
},
})

ImageElement.js ：这是 ImageElement.js 的代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';

export default class GridLayoutSample extends Component{
  render(){
    return(
      <Image source={this.props.imgsource} style={styles.image}>
      </Image>
    )
  }
}

const styles = StyleSheet.create({
  image:{
    flex:1,
    width: null,
    alignSelf: 'stretch',
  }
})

Answer 1

您是否安装了react-native-video 以在您的应用程序中渲染视频。如果是，那么我曾经遇到过同样的问题。我所做的是我们没有 react-native video 的缩略图支持。我是这样做的

<Video
      source={{ uri: source of your video }}
      style={[{ width: null, height: null, flex:1 }]}
      paused
 />

这将暂停视频并显示为图像（视频的第一帧），将其嵌入 TouchableOpacity。在全屏模式下单击该节目。

希望对你有所帮助。

Answer 2

传递给Image 标记的视频网址不会显示任何图像。

您可以传递代表视频的缩略图。 onPress 图像，打开模态并播放视频。建议您使用此库播放视频react-native-af-video-player。它带有添加的视频播放器组件，并基于react-native-video 构建。在加载视频时，包会自动加载缩略图，或者如果您希望有一个道具来添加您自己的缩略图。

希望这会有所帮助。如果您需要任何示例代码，请发表评论。