Функция для воспроизведения видео с использованием плоского списка - PullRequest
Новая
       56

Функция для воспроизведения видео с использованием плоского списка

0 голосов
/ 14 апреля 2020

Я пытаюсь загрузить видео с моего фотоаппарата и отобразить его в моем приложении, позволяя пользователям нажимать на тот, который они хотят воспроизвести.

Я могу отобразить видео / камеры, но не могу понять, как включить функцию «Воспроизвести видео» для работы с моим списком.

вот мой код отображения плоского списка на данный момент: 

class showVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '',
    };
  }

  async componentDidMount() {
    if (Platform.OS === 'android') {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: 'Permission Explanation',
          message: 'ReactNativeForYou would like to access your photos!',
        },
      );
      if (result !== 'granted') {
        console.log('Access to pictures was denied');
        return;
      }
    }

    CameraRoll.getPhotos({
      first: 50,
      assetType: 'All',
    })
      .then(res => {
        this.setState({data: res.edges});
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.data}
          numColumns={3}
          renderItem={({item}) => (
            <Image
              style={{
                width: '33%',
                height: 150,
              }}
              source={{uri: item.node.image.uri}}
            />
          )}
        />
      </View>
    );
  }
}

Что я хотел бы сделать: добавить осветительную подсветку вокруг каждого видео (поскольку одновременно показывается 50 видео / фотографий) и когда пользователь нажимает на определенный c квадрат, вызовите функцию воспроизведения видео, чтобы фактически просмотреть видео.

Кто-нибудь знает какие-либо хорошие источники, которые документируют, как я мог go об этом? Я рассмотрел несколько опций воспроизведения видео, например, компонент собственного видео, который используется следующим образом: 

// Load the module

import Video from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

, однако я понятия не имею, как я могу включить это в свой код. У меня уже есть источник в моей области плоского списка, поэтому я бы назначил источник = источник?

Я нуб, чтобы реагировать нативно, поэтому любые указатели были бы великолепны.

...