Trước khi thực hiện demo này, bạn hãy tạo project mới thử nghiệm với phiên bản cục bộ theo hướng dẫn ở bài viết: https://zezo.dev/view/lam-quen-voi-redux-trong-react-native Trong bài viết này sẽ tổ chức code và xây dựng chức năng hiển thị danh sách dữ liệu từ API Bước 1: Tạo cấu trúc thư mục Bước 2: Tạo […]
Thư viện: https://github.com/react-native-image-picker/react-native-image-picker Bước 1: Cài đặt thư viện vào project npm i react-native-image-picker –save Bước 2: Import thư viện và code tài nguyên tham khảo Import thư viện: import * as ImagePicker from ‘react-native-image-picker’; Tham khảo tại https://github.com/react-native-image-picker/react-native-image-picker/blob/main/example/src/App.tsx Bước 3: Vào component chính khai báo state để chứa ảnh chọn const [anhChon, setAnhChon] […]
Bước 1: Chuẩn bị API cho phép upload ảnh Bạn cần có một link API chấp nhận việc upload ảnh, hãy xem hướng dẫn tạo API ở bài viết này: https://zezo.dev/view/huong-dan-tao-route-upload-file-voi-multer-trong-nodejs Bước 2: Chuẩn bị ứng dụng ReactNative cho phép chọn ảnh hoặc chụp ảnh Trước khi upload ảnh, bạn cần có chức năng […]
Để thực hiện được phần này bạn cần có ứng dụng đã chạy được ở phần 2 hoặc phần 4 Phần này sẽ thực hiện cài đặt các event điều khiển trong service Bạn vào file trackPlayerServices.js để viết code cho hàm playbackService export async function playbackService() { // Các điều khiển dưới đây khai báo […]
Trước khi thao tác theo bài viết này, bạn cần có ứng dụng theo hướng dẫn ở bài viết trước https://zezo.dev/view/huong-dan-lam-ung-dung-choi-nhac-co-cac-chuc-nang-dieu-khien-trong-reactnative-phan-3 Thư viện có hỗ trợ sử dụng hàm hook useProgress để giám sát tiến trình chạy nhạc. Bước 1: Tạo một component hiển thị tiến trình Component này sẽ hiển thị tiến trình theo định dạng […]
Trước khi thao tác theo bài viết này, bạn cần có ứng dụng đơn giản theo hướng dẫn ở bài viết trước https://zezo.dev/view/huong-dan-lam-ung-dung-choi-nhac-co-cac-chuc-nang-dieu-khien-trong-reactnative-phan-2 Thư viện hỗ trợ các hàm giúp bạn điều khiển quá trình chơi nhạc TrackPlayer.pause: Tạm dừng chơi nhạc, bạn có thể tiếp tục bằng hàm TrackPlayer.play TrackPlayer.seekTo: Chuyển tới một […]
Trước khi thao tác theo bài viết này, bạn cần có ứng dụng đơn giản theo hướng dẫn ở bài viết trước https://zezo.dev/view/huong-dan-lam-ung-dung-choi-nhac-co-cac-chuc-nang-dieu-khien-trong-reactnative Bài viết này sẽ cải tiến ứng dụng để quản lý Playlist. TrackPlayer cung cấp một số hàm điều khiển chơi nhạc: TrackPlayer.remove: Xóa một bản nhạc ra khỏi danh sách […]
Trước hết bạn nên xem hướng dẫn ở mức cơ bản để biết cách thao tác với thư viện react-native-track-player trong bài viết này https://zezo.dev/view/huong-dan-tao-ung-dung-choi-nhac-don-gian-trong-reactnative Tiếp theo bạn nên tạo một ứng dụng mới để thực hiện theo ví dụ mẫu Bước 1: Cài đặt thư viện npm install –save react-native-track-player Bước 2: Tạo file service […]
File App.tsx import { Button, StyleSheet, Text, View } from ‘react-native’ import React, { useEffect, useState } from ‘react’ import TrackPlayer, { State } from ‘react-native-track-player’; const App = () => { const setupApp = async ()=>{ console.log(“setup player”); await TrackPlayer.setupPlayer(); let listTrack = [ { id: ‘1’, url: ‘https://cdn.pixabay.com/audio/2022/10/18/audio_31c2730e64.mp3’, title: ‘Password Infinity’, artist: ”, […]
Thư viện react-native-track-player là một thư viện hỗ trợ phát nhạc và video trong ứng dụng viết bằng ReactNative. Thư viện này cung cấp nhiều phương thức hỗ trợ xử lý điều khiển âm thanh như: play, pause, stop, remove, skip, next, previous, reset… Để thực hành với thư viện này, bạn hãy thực hành những bước […]