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用于在应用程序中呈现视频。如果是，那么我曾经经历过同样的问题。我所做的是，本机视频没有缩略图支持。我做到了

<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构建。加载视频后，该程序包会自动加载缩略图，或者如果您愿意的话，还可以添加自己的缩略图。

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

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

2 个答案: