如何在网格布局中显示视频并在Press React Antial上播放

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
      source={{ uri: source of your video }}
      style={[{ width: null, height: null, flex:1 }]}
      paused
 />

这将暂停视频，并将显示为图像（视频的第一帧），并嵌入可触摸性的。单击"模态"中的该节目。

希望它对您有帮助。

Answer 2

视频URL传递给Image标签不会显示任何图像。

您可以通过代表视频的缩略图。图像的启动，打开模态并播放视频。建议您使用此库来播放Video React-Native-Af-af-Video-player。它带有添加的视频播放器组件，并在react-native-video上构建。在视频的负载上，包装自动加载缩略图，或者如果您想要添加自己的缩略图的道具。

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