React Native-এ ভিডিও ব্যাকগ্রাউন্ড হিসেবে ব্যবহার: ধাপে ধাপে গাইড

এই পোস্টে, আমরা React Native-এ একটি backgroundVideo তৈরি করব। আপনি যদি React Native-এ নতুন হন, আমার আর্টিকেল "React Native-এ মোবাইল অ্যাপ বানাতে যা জানতে হবে" চেক আউট করুন।

ব্যাকগ্রাউন্ড ভিডিও একটি অ্যাপের UI-এ একটি সুন্দর ইফেক্ট যোগ করতে পারে। এটি সহায়ক হতে পারে যদি আপনি উদাহরণস্বরূপ বিজ্ঞাপন প্রদর্শন করতে চান বা ইউজারকে একটি মেসেজ পাঠাতে চান, যেমন আমরা এখানে করব।

আপনাকে কিছু বেসিক রিকোয়ারমেন্ট হবে। শুরু করতে, আপনার react-native এনভায়রনমেন্ট সেটআপ থাকতে হবে। তার মানে:

• react-native-cli ইনস্টলড
• Android SDK; আপনার কাছে Mac থাকলে শুধু 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 রিকোয়েস্ট করার সবচেয়ে জনপ্রিয় উপায়গুলো

আপনি আমাকে Twitter-এ পাবেন ?

আমার মেইলিং লিস্ট সাবস্ক্রাইব করুন আগামী আর্টিকেলগুলো জন্য আপডেটেড থাকতে।