React Native में वीडियो को बैकग्राउंड के रूप में उपयोग करना - चरण-दर-चरण गाइड

इस पोस्ट में, हम React Native में एक backgroundVideo बनाने जा रहे हैं। यदि आपने अभी React Native के साथ शुरुआत की है तो मेरा लेख देखें कि React Native के साथ मोबाइल ऐप्स बनाना शुरू करने के लिए आपको क्या जानने की आवश्यकता है।

बैकग्राउंड वीडियो ऐप के UI में एक अच्छा प्रभाव जोड़ सकता है। वे तब भी उपयोगी हो सकते हैं यदि आप उदाहरण के लिए विज्ञापन प्रदर्शित करना चाहते हैं या उपयोगकर्ता को एक संदेश भेजना चाहते हैं, जैसा कि हम यहां करेंगे।

आपको कुछ बुनियादी आवश्यकताओं की आवश्यकता होगी। शुरू करने के लिए, आपके पास react-native वातावरण सेटअप होना चाहिए। इसका मतलब है कि आपके पास है:

• react-native-cli इंस्टॉल
• Android SDK; यदि आपके पास मैक है तो आपको इसकी आवश्यकता नहीं होगी, बस Xcode

शुरुआत करना

पहली चीजें पहले, आइए एक नया React Native ऐप बूटस्ट्रैप करें। मेरे मामले में मैं 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:

yarn add react-native-video styled-components

• NPM

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

फिर आपको react-native-video को लिंक करना होगा क्योंकि इसमें नेटिव कोड होता है — और styled-components के लिए हमें इसकी आवश्यकता नहीं है। तो बस चलाएं:

react-native link

आपको अन्य चीजों के बारे में चिंता करने की ज़रूरत नहीं है, बस Video कंपोनेंट पर ध्यान केंद्रित करें। सबसे पहले, react-native-video से Video आयात करें और इसका उपयोग करना शुरू करें।

import import Video from "react-native-video"; <Video source={require("./../assets/video1.mp4")} style={styles.backgroundVideo} muted={true} repeat={true} resizeMode={"cover"} rate={1.0} ignoreSilentSwitch={"obey"} />

इसे तोड़ते हैं:

• source: स्रोत वीडियो का पथ। आप URL का भी उपयोग कर सकते हैं:

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

• style: वह कस्टम स्टाइल जो हम वीडियो को देना चाहते हैं, और बैकग्राउंड वीडियो बनाने की कुंजी
• resizeMode: हमारे मामले में यह cover है; आप contain or stretch भी आज़मा सकते हैं लेकिन यह हमें वह नहीं देगा जो हम चाहते हैं

और अन्य प्रॉप्स वैकल्पिक हैं।

आइए महत्वपूर्ण भाग पर चलते हैं: वीडियो को बैकग्राउंड पोजीशन में रखना। आइए स्टाइल्स परिभाषित करें।

// हम react-native से StyleSheet का उपयोग करते हैं इसलिए इसे आयात करना न भूलें //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 दी। हमने यह सुनिश्चित करने के लिए React Native से Dimensions का उपयोग किया कि वीडियो पूरी ऊंचाई ले रहा है — 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 ( <View> <Video source={require("./../assets/video1.mp4")} style={styles.backgroundVideo} muted={true} repeat={true} resizeMode={"cover"} rate={1.0} ignoreSilentSwitch={"obey"} /> <Wrapper> <Logo source={require("./../assets/cadence-logo.png")} width={50} height={50} resizeMode="contain" /> <Title>Join Live And on-demand classes</Title> <TextDescription> With world-class instructions right here, right now </TextDescription> <ButtonWrapper> <Fragment> <Button title="Create Account" /> <Button transparent title="Login" /> </Fragment> </ButtonWrapper> </Wrapper> </View> ); } } 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 ( <StyledButton {...props}> <StyledTitle {...props}>{props.title}</StyledTitle> </StyledButton> ); };

साथ ही, आप निम्न करके इस कंपोनेंट को पुन: प्रयोज्य बना सकते हैं:

<View> <Video source={require("./../assets/video1.mp4")} style={styles.backgroundVideo} muted={true} repeat={true} resizeMode={"cover"} rate={1.0} ignoreSilentSwitch={"obey"} /> {this.props.children} </View>

और आप इसे अन्य कंपोनेंट्स के साथ उपयोग कर सकते हैं:

यह बहुत अधिक है। पढ़ने के लिए धन्यवाद!

React Native के बारे में अधिक जानें:

• React Native में मोबाइल ऐप्स बनाना शुरू करने के लिए आपको क्या जानने की आवश्यकता है
• React Native में स्टाइलिंग

अन्य पोस्ट:

• JavaScript ES6, कम लिखें — अधिक करें
• Vue.js में रूटिंग का उपयोग करके बेहतर उपयोगकर्ता अनुभव कैसे बनाएं
• JavaScript में HTTP अनुरोध करने के सबसे लोकप्रिय तरीके यहां दिए गए हैं

आप मुझे ट्विटर पर पा सकते हैं ?

आगामी लेखों के लिए अपडेट रहने के लिए मेरी मेलिंग सूची की सदस्यता लें।