Как отображать видео в сетке и играть на прессе React Native - PullRequest
Новая
       34

Как отображать видео в сетке и играть на прессе React Native

1 голос
/ 06 марта 2019

Я отображаю набор изображений в сетке.Но когда я добавляю 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',
  }
})

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

URL-адрес видео, переданный тегу Image, не будет отображать изображения.

Вы можете передать миниатюру, представляющую видео.Нажмите на изображение, откройте модальное и воспроизведите видео.Предложил бы вам использовать эту библиотеку для воспроизведения видео Reaction-native-af-video-player .Он поставляется с добавленными компонентами видеоплеера и построен на react-native-video.При загрузке видео пакет автоматически загружает миниатюру или, если вы хотите, есть подпорка для добавления собственной миниатюры.

Надеюсь, это поможет.Пожалуйста, прокомментируйте, если вам нужен пример кода.

0 голосов
/ 06 марта 2019

Установили ли вы Reaction-native-Video для рендеринга видео в вашем приложении. Если да, то я однажды прошел через ту же проблему. Что я сделал, так это то, что у нас нет поддержки миниатюр из собственного видео . Я сделал это следующим образом 

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

Это приостановит видео и покажет его как изображение (первый кадр видео), вставив его с TouchableOpacity. При нажатии на это шоу в режиме с полноэкранным режимом.

Надеюсь, это поможет вам.

...