reactjs - 如何以网格布局显示视频并在按下 React Native 时播放
问题描述
我在网格布局中显示一组图像。但是,当我将视频 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',
}
})
解决方案
您是否安装了react-native-video以在您的应用程序中呈现视频。如果是,那么我曾经遇到过同样的问题。我所做的是我们没有react-native video 的缩略图支持。我做了如下
<Video
source={{ uri: source of your video }}
style={[{ width: null, height: null, flex:1 }]}
paused
/>
这将暂停视频并显示为图像(视频的第一帧),将其嵌入 TouchableOpacity。在全屏模式下单击该节目。
希望它会帮助你。
推荐阅读
- c# - 如何在 C# 中使 listBox 中的链接可点击
- postgresql - 我的数据库设计做错了什么,其中两个外键是表中唯一的东西?
- css - Rmarkdown - 将带有浮动目录的 HTML 打印为 PDF 时,小部件的大小会发生变化
- r - 在 MATRIC 的多列上使用 FOR LOOP 并在 RStudio 中保持 FIRST 列不变
- reactjs - React 和 Redux 模式
- reactjs - react-three-fiber中如何使用instancedBufferAttribute来绘制粒子?
- java - 结合两个单声道和返回值
- spring-boot - 带有@QuerydslPredicate 的逗号分隔的长查询参数未正确映射
- wpf - 绑定itemsource后如何清除WPF ItemList?
- java - 无法连接到 AWS RDS 数据库 - Java MySQL 连接错误