প্রতিক্রিয়া নেটিভ-এ ব্যাকগ্রাউন্ড হিসাবে ভিডিও কীভাবে ব্যবহার করবেন

এই পোস্টে, আমরা একটি backgroundVideo তৈরি করতে যাচ্ছি নেটিভ প্রতিক্রিয়া. আপনি যদি সবেমাত্র রিঅ্যাক্ট নেটিভ দিয়ে শুরু করে থাকেন তাহলে আমার নিবন্ধটি দেখুন রিঅ্যাক্ট নেটিভ দিয়ে মোবাইল অ্যাপ তৈরি করতে আপনার যা জানা দরকার।

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

আপনি কিছু মৌলিক প্রয়োজনীয়তা প্রয়োজন হবে. শুরু করতে, আপনার অবশ্যই প্রতিক্রিয়া-নেটিভ পরিবেশ সেটআপ থাকতে হবে। তার মানে আপনার আছে:

• react-native-cli ইনস্টল করা হয়েছে
• Android SDK; আপনার যদি ম্যাক থাকে তবে আপনার এটির প্রয়োজন হবে না, শুধু Xcode

শুরু করা

প্রথম জিনিস প্রথমে, আসুন একটি নতুন প্রতিক্রিয়া নেটিভ অ্যাপ বুটস্ট্র্যাপ করি। আমার ক্ষেত্রে আমি react-native-cli ব্যবহার করছি। তাই আপনার টার্মিনাল রানে:

react-native init myapp

এটি আপনার প্রতিক্রিয়া নেটিভ অ্যাপ চালানোর জন্য সমস্ত নির্ভরতা এবং প্যাকেজ ইনস্টল করা উচিত।

পরবর্তী ধাপ হল সিমুলেটরে অ্যাপটি চালানো এবং ইনস্টল করা।

iOS এর জন্য:

react-native run-ios

এটি iOS সিমুলেটর খুলতে হবে৷

অ্যান্ড্রয়েডে:

react-native run-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";
  <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 অনুরোধ করার সবচেয়ে জনপ্রিয় উপায়গুলি এখানে রয়েছে

আপনি আমাকে টুইটারে খুঁজে পেতে পারেন?

আসন্ন নিবন্ধগুলির জন্য আমার মেইলিং তালিকায় সদস্যতা নিন৷