रिएक्ट नेटिव में पृष्ठभूमि के रूप में वीडियो का उपयोग कैसे करें

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

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

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

• प्रतिक्रिया-मूल-क्ली स्थापित
• एंड्रॉयड एसडीके; यदि आपके पास एक मैक है तो आपको इसकी आवश्यकता नहीं होगी, बस Xcode

आरंभ करना

सबसे पहले चीज़ें, आइए एक नए रिएक्ट नेटिव ऐप को बूटस्ट्रैप करें। मेरे मामले में मैं प्रतिक्रिया देशी-क्ली का उपयोग कर रहा हूँ। तो अपने टर्मिनल रन में:

react-native init myapp

यह आपके रिएक्ट नेटिव ऐप को चलाने के लिए सभी निर्भरताओं और पैकेजों को स्थापित करना चाहिए।

अगला कदम सिम्युलेटर पर ऐप को चलाना और इंस्टॉल करना है।

आईओएस के लिए:

react-native run-ios

इससे आईओएस सिम्युलेटर खुल जाएगा।

Android पर:

react-native run-android 

आपको Android के साथ कुछ परेशानी हो सकती है। मेरा सुझाव है कि आप Genymotion और Android एमुलेटर का उपयोग करें या परिवेश को सेट करने के लिए इस अनुकूल मार्गदर्शिका को देखें।

सबसे पहले हम जो करने जा रहे हैं वह है पेलेटन ऐप की होम स्क्रीन को क्लोन करना। हम react-native-video का उपयोग कर रहे हैं वीडियो स्ट्रीमिंग के लिए, और styled-component स्टाइल के लिए। तो आपको उन्हें इंस्टॉल करना होगा:

• यार्न:

yarn add react-native-video styled-components

• एनपीएम

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

फिर आपको प्रतिक्रिया-मूल-वीडियो लिंक करने की आवश्यकता है क्योंकि इसमें मूल कोड है - और styled-components . के लिए हमें इसकी आवश्यकता नहीं है। तो बस दौड़ें:

react-native link

आपको अन्य चीज़ों के बारे में चिंता करने की ज़रूरत नहीं है, बस 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"}
/>

आइए इसे तोड़ दें:

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

source={{uri:"https://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 . का इस्तेमाल किया रिएक्ट नेटिव से यह सुनिश्चित करने के लिए कि वीडियो पूरी ऊंचाई ले रहा है — 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>

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

तो इतना ही है। पढ़ने के लिए धन्यवाद!

रिएक्टिव नेटिव के बारे में अधिक जानें:

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

अन्य पोस्ट:

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

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

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