Dalam catatan ini, kita akan membuat backgroundVideoReact Native. Sekiranya anda baru memulakan dengan React Native, baca artikel saya Apa yang perlu anda ketahui untuk mula membina aplikasi mudah alih dengan React Native.
Video latar dapat menambahkan kesan yang baik pada UI aplikasi. Mereka mungkin berguna juga jika anda ingin memaparkan, misalnya, iklan atau menghantar mesej kepada pengguna, seperti yang akan kami lakukan di sini.
Anda akan memerlukan beberapa syarat asas. Untuk memulakan, anda mesti mempunyai persediaan persekitaran semula jadi. Ini bermakna anda mempunyai:
- react-native-cli dipasang
- SDK Android; jika anda mempunyai mac anda tidak memerlukannya, hanya Xcode
Bermula
Pertama, mari kita buat aplikasi React Native yang baru. Dalam kes saya, saya menggunakan react-native-cli. Jadi dalam terminal anda jalankan:
react-native init myappIni harus memasang semua pergantungan dan pakej untuk menjalankan aplikasi React Native anda.
Langkah seterusnya adalah menjalankan dan memasang aplikasi pada simulator.
Untuk iOS:
react-native run-iosIni akan membuka simulator iOS.
Pada Android:
react-native run-android Anda mungkin menghadapi masalah dengan Android. Saya mengesyorkan agar anda menggunakan Genymotion dan emulator Android atau lihat panduan mesra ini untuk mengatur persekitaran.
Pertama yang akan kami lakukan adalah mengklon skrin utama aplikasi Peleton. Kami menggunakan react-native-videountuk streaming video, dan styled-componentuntuk gaya. Oleh itu, anda mesti memasangnya:
- Benang:
yarn add react-native-video styled-components- NPM
npm -i react-native-video styled-components --saveOleh itu, anda perlu memaut reaksi-asli-video kerana mengandungi kod asli - dan kerana styled-componentskami tidak memerlukannya. Oleh itu, jalankan:
react-native linkAnda tidak perlu bimbang tentang perkara lain, hanya fokus pada VideoKomponen. Pertama, import Video dari react-native-video dan mula menggunakannya.
import import Video from "react-native-video"; Mari pecahkannya:
- sumber : jalan ke sumber video. Anda boleh menggunakan URL sebagai gantinya:
source={{uri:"//youronlineVideo.mp4"}}- gaya: gaya kostum yang ingin kami berikan kepada video, dan kunci untuk membuat video latar
- resizeMode: dalam kes kami adalah
cover; anda boleh mencuba jugacontain or stretchtetapi ini tidak akan memberikan apa yang kami mahukan
Dan alat peraga lain adalah pilihan.
Mari beralih ke bahagian penting: meletakkan video di kedudukan latar belakang. Mari tentukan gaya.
// 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 } });Apa yang kita buat di sini?
Kami memberikan video position :absolutedan kami memberikannya tetingkap heightperanti. Kami menggunakan Dimensionsdari React Native untuk memastikan bahawa video mengambil keseluruhan - top:0, left:0,bottom:0,right:0- sehingga video mengambil semua ruang!
Keseluruhan kod:
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} ); };Anda juga boleh menjadikan komponen ini dapat digunakan semula dengan melakukan perkara berikut:
{this.props.children} Dan anda boleh menggunakannya dengan komponen lain:
Itu cukup banyak. Terima kasih kerana membaca!
Ketahui lebih lanjut mengenai React Native:
- Apa yang perlu anda ketahui untuk mula membina aplikasi mudah alih di React Native
- Gaya dalam React Native
Catatan lain:
- JavaScript ES6, tulis Kurang - Lakukan lebih banyak lagi
- Cara menggunakan routing di Vue.js untuk mewujudkan pengalaman pengguna yang lebih baik
- Berikut adalah kaedah paling popular untuk membuat permintaan HTTP dalam JavaScript