كيفية استخدام الفيديو كخلفية في React Native

في هذا backgroundVideoالمنشور ، سننشئ في React Native. إذا كنت قد بدأت للتو مع React Native ، فراجع مقالتي ما تحتاج إلى معرفته لبدء إنشاء تطبيقات الأجهزة المحمولة باستخدام React Native.

يمكن أن يضيف فيديو الخلفية تأثيرًا رائعًا إلى واجهة المستخدم الخاصة بالتطبيق. قد تكون مفيدة أيضًا إذا كنت تريد عرض الإعلانات ، على سبيل المثال ، أو إرسال رسالة إلى المستخدم ، كما نفعل هنا.

سوف تحتاج إلى بعض المتطلبات الأساسية. للبدء ، يجب أن يكون لديك إعداد بيئة التفاعل الأصلي. هذا يعني أن لديك:

  • رد فعل الأصلي CLI مثبتة
  • أندرويد سك؛ إذا كان لديك جهاز Mac ، فلن تحتاج إليه ، فقط Xcode

ابدء

أول الأشياء أولاً ، دعنا نبدأ تشغيل تطبيق React Native جديد. في حالتي أنا أستخدم رد فعل أصلي cli. لذلك في تشغيل المحطة:

react-native init myapp

يجب أن يقوم هذا بتثبيت جميع التبعيات والحزم لتشغيل تطبيق React Native.

الخطوة التالية هي تشغيل التطبيق وتثبيته على جهاز المحاكاة.

لنظام iOS:

react-native run-ios

هذا يجب أن يفتح محاكي iOS.

على Android:

react-native run-android

قد تواجه بعض المشاكل مع Android. أوصي باستخدام Genymotion ومحاكي Android أو الاطلاع على هذا الدليل الودي لإعداد البيئة.

أول ما سنفعله هو استنساخ الشاشة الرئيسية لتطبيق Peleton. نحن react-native-videoنستخدمه لدفق الفيديو styled-componentوالتصميم. لذلك عليك تثبيتها:

  • غزل:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

ثم تحتاج إلى ربط رد فعل أصلي-فيديو لأنه يحتوي على كود أصلي - styled-componentsولسنا بحاجة إلى ذلك. لذلك ببساطة قم بتشغيل:

react-native link

لا داعي للقلق بشأن الأشياء الأخرى ، فقط ركز على Videoالمكون. أولاً ، قم باستيراد الفيديو من رد فعل أصلي-فيديو وابدأ في استخدامه.

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

دعنا نقسمها:

  • المصدر : المسار إلى الفيديو المصدر. يمكنك استخدام عنوان URL بدلاً من ذلك:
source={{uri:"//youronlineVideo.mp4"}}
  • النمط: نمط الزي الذي نريد تقديمه للفيديو ، والمفتاح لعمل فيديو الخلفية
  • resizeMode: في حالتنا هو cover؛ يمكنك المحاولة أيضًا contain or stretchولكن هذا لن يمنحنا ما نريد

والدعائم الأخرى اختيارية.

دعنا ننتقل إلى الجزء المهم: وضع الفيديو في وضع الخلفية. دعونا نحدد الأنماط.

// 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 } });

ماذا فعلنا هنا؟

أعطينا الفيديو أ position :absoluteوأعطيناه نافذة heightالجهاز. استخدمنا Dimensionsمن React Native للتأكد من أن الفيديو يشغل كامل الارتفاع - top:0, left:0,bottom:0,right: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}

ويمكنك استخدامه مع مكونات أخرى:

هذا الى حد كبير ذلك. شكرا لقرائتك!

تعرف على المزيد حول React Native:

  • ما تحتاج إلى معرفته لبدء إنشاء تطبيقات الأجهزة المحمولة في React Native
  • التصميم في React Native

وظائف أخرى:

  • JavaScript ES6 ، اكتب أقل - أنجز المزيد
  • كيفية استخدام التوجيه في Vue.js لإنشاء تجربة مستخدم أفضل
  • فيما يلي أكثر الطرق شيوعًا لتقديم طلب HTTP في JavaScript
يمكنك أن تجدني على تويتر؟

اشترك في قائمتي البريدية لتبقى على اطلاع بالمقالات القادمة.