În acest post, vom crea un backgroundVideoReact Native. Dacă tocmai ați început cu React Native, consultați articolul meu Ce trebuie să știți pentru a începe să creați aplicații mobile cu React Native.
Videoclipul de fundal poate adăuga un efect frumos la interfața de utilizare a unei aplicații. Ele pot fi utile și dacă doriți să afișați, de exemplu, reclame sau să trimiteți un mesaj utilizatorului, așa cum vom face aici.
Veți avea nevoie de câteva cerințe de bază. Pentru a începe, trebuie să aveți configurarea unui mediu nativ pentru reacție. Asta înseamnă că aveți:
- react-native-cli instalat
- SDK Android; dacă aveți un Mac nu veți avea nevoie de asta, doar Xcode
Noțiuni de bază
Mai întâi, să lansăm o nouă aplicație React Native. În cazul meu, folosesc react-native-cli. Deci, în terminalul dvs. rulați:
react-native init myappAceasta ar trebui să instaleze toate dependențele și pachetele pentru a rula aplicația dvs. React Native.
Următorul pas este să rulați și să instalați aplicația pe simulator.
Pentru iOS:
react-native run-iosAcest lucru ar trebui să deschidă simulatorul iOS.
Pe Android:
react-native run-android Este posibil să aveți unele probleme cu Android. Vă recomand să utilizați Genymotion și emulatorul Android sau să consultați acest ghid prietenos pentru a configura mediul.
Mai întâi, ceea ce vom face este să clonăm ecranul de pornire al aplicației Peleton. Folosim react-native-videopentru streaming video și styled-componentpentru stil. Deci, trebuie să le instalați:
- Fire:
yarn add react-native-video styled-components- NPM
npm -i react-native-video styled-components --saveApoi, trebuie să legați react-native-video, deoarece conține cod nativ - și pentru styled-componentscă nu avem nevoie de asta. Deci, pur și simplu rulați:
react-native linkNu trebuie să vă faceți griji cu privire la celelalte lucruri, ci doar să vă concentrați asupra VideoComponentei. Mai întâi, importați videoclipuri din react-native-video și începeți să îl utilizați.
import import Video from "react-native-video"; Să o descompunem:
- sursă : calea către videoclipul sursă. Puteți utiliza adresa URL în schimb:
source={{uri:"//youronlineVideo.mp4"}}- stil: stilul de costum pe care dorim să-l oferim videoclipului și cheia realizării videoclipului de fundal
- resizeMode: în cazul nostru este
cover; puteți încerca, de asemenea,contain or stretchdar acest lucru nu ne va oferi ceea ce dorim
Și alte elemente de recuzită sunt opționale.
Să trecem la partea importantă: plasarea videoclipului în poziția de fundal. Să definim stilurile.
// 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 } });Ce am făcut aici?
Am dat videoclipul un position :absoluteși i-am dat fereastra heightdispozitivului. Am folosit DimensionsReact Native pentru a ne asigura că videoclipul ocupă toată înălțimea top:0, left:0,bottom:0,right:0- astfel încât videoclipul să ocupe tot spațiul!
Întregul cod:
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} ); };De asemenea, puteți face această componentă reutilizabilă procedând în felul următor:
{this.props.children} Și îl puteți folosi cu alte componente:
Cam asta e tot. Mulțumesc că ai citit!
Aflați mai multe despre React Native:
- Ce trebuie să știți pentru a începe să creați aplicații mobile în React Native
- Styling în React Native
Alte postări:
- JavaScript ES6, scrieți mai puțin - Faceți mai mult
- Cum se utilizează rutare în Vue.js pentru a crea o experiență de utilizare mai bună
- Iată cele mai populare moduri de a face o solicitare HTTP în JavaScript