Как использовать видео в качестве фона в реактивном родном

Автор оригинала: FreeCodeCamp Community Member.

В этом посте мы собираемся создать backgroundvideo в реактивном родном. Если вы только что начали с реагирования на родие, проверьте мою статью Что вам нужно знать, чтобы начать строить мобильные приложения с React Nativ добиваться

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

Вам понадобятся некоторые основные требования. Чтобы начать, вы должны иметь настройку среды реагирования. Это означает, что у вас есть:

React – Nature-Cli установлены
Android SDK; Если у вас есть Mac, вам это не нужно, просто Xcode

Начиная

Первые вещи сначала давайте загрузим новое нативное приложение Rect React. В моем случае я использую React-Nature-Cli. Так что в вашем терминале запущен:

react-native init myapp

Это должно установить все зависимости и пакеты, чтобы запустить ваше собственное приложение raction.

Следующим шагом является запустить и установить приложение на симуляторе.

Для iOS:

react-native run-ios

Это должно открыть симулятор iOS.

На Android:

react-native run-android

У вас могут быть проблемы с Android. Я рекомендую вам использовать Genymotion и эмулятор Android или проверить Это дружеское руководство настроить окружающую среду.

Во-первых, что мы собираемся сделать, это клонировать домашний экран Peloton App. Мы используем React – Nature-Video Для потокового видео и Стильный компонент для стайлинга. Так что вы должны их установить:

Пряжа:

yarn add react-native-video styled-components

npm -i react-native-video styled-components --save

Тогда вам нужно связать React-Native-Video, потому что он содержит нативный код – и для Стильные компоненты Нам это не нужно. Так просто запустите:

react-native link

Вам не нужно беспокоиться о других вещах, просто сосредоточиться на Видео Составная часть. Во-первых, импортировать видео из React-Native-Video и начните использовать его.

import import Video from "react-native-video";

Давайте сломаемся:

Источник : путь к исходному видео. Вместо этого вы можете использовать URL:

source={{uri:"https://youronlineVideo.mp4"}}

Стиль: Стиль костюма, который мы хотим дать видео, и ключ, чтобы сделать фоновое видео
Resizemode: В нашем случае это Крышка ; Вы можете попробовать также содержать или растягиваться Но это не даст нам, что мы хотим

И другие реквизиты являются необязательными.

Давайте перейдем к важной части: поместив видео в фоновом положении. Давайте определим стили.

// We use StyleSheet from react-native so don't forget to import it
//import {StyleSheet} from "react-native";
const { height } = Dimensions.get("window");
const styles = StyleSheet.create({
backgroundVideo: {
height: height,
position: "absolute",
top: 0,
left: 0,
alignItems: "stretch",
bottom: 0,
right: 0
}
});

Что мы здесь сделали?

Мы дали видео A Должность: абсолютный и мы даем это окно Высота устройства. Мы использовали Размеры от реагирования на родом, чтобы убедиться, что видео занимает всю высоту – Вершина: 0, слева: 0, снизу: 0, справа: 0 – Чтобы видео занимает все пространство!

Весь код:

import React, { Component, Fragment } from "react";
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
  TouchableHighlight
} from "react-native";
import styled from "styled-components/native";
import Video from "react-native-video";
const { width, height } = Dimensions.get("window");
export default class BackgroundVideo extends Component {
  render() {
    return (
      
        

        
          
          Join Live And on-demand classes
          
            With world-class instructions right here, right now
          
          
            
              
              
            
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  backgroundVideo: {
    height: height,
    position: "absolute",
    top: 0,
    left: 0,
    alignItems: "stretch",
    bottom: 0,
    right: 0
  }
});

// styled-component

export const Wrapper = styled.View`
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  flex-direction: column;
`;
export const Logo = styled.Image`
  max-width: 100px;
  width: 100px;
  height: 100px;
`;
export const TextDescription = styled.Text`
  letter-spacing: 3;
  color: #f4f4f4;
  text-align: center;
  text-transform: uppercase;
`;
export const ButtonWrapper = styled.View`
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
`;
export const Title = styled.Text`
  color: #f4f4f4;
  margin: 50% 0px 20px;
  font-size: 30;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3;
`;
const StyledButton = styled.TouchableHighlight`
 width:250px;
 background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")};
 padding:15px;
border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)}
 justify-content:center;
 margin-bottom:20px;
 border-radius:24px
`;
StyledTitle = styled.Text`
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  letter-spacing: 3;
  color: ${props => (props.transparent ? "#f3f8ff " : "#666")};
`;

export const Button = ({ onPress, color, ...props }) => {
  return (
    
      {props.title}
    
  );
};

Кроме того, вы можете сделать этот компонент многоразовый, выполнив следующее:



{this.props.children}

И вы можете использовать его с другими компонентами:

Это в значительной степени это. Спасибо за чтение!

Начиная

Узнайте больше о реакции нативно:

Другие сообщения:

Подпишитесь на мой список рассылки, чтобы оставаться настроенными для предстоящих статей.

Читайте ещё по теме: