Để 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 […]
Bước 1: Viết hàm sao chép // Hàm sao chép vào clipboard void _copyTextToClipboard(String text, BuildContext context) { Clipboard.setData(ClipboardData(text: text)); ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text(‘Info copied to clipboard’), duration: Duration(seconds: 2), ), ); } Bước 2: Tạo nút bấm hoặc IconButton để thực hiện thao tác IconButton( icon: const Icon( Icons.copy_all_outlined, // Biểu tượng bạn […]
Định dạng ô nhập password sao cho đẹp và tiện dụng Bước 1: Khai báo state để kiểm tra trạng thái ẩn hiện password Phần khai báo này nên khai báo ở đầu widget bool _isObscure = true; Bước 2: Thiết lập cho TextField để nhận vai trò ô nhập password Trong đó: – […]
Bước 1: Cài thư viện npm install i18next i18next-http-backend i18next-express-middleware Bước 2: Tạo file cấu hình i18n.js const i18next = require(‘i18next’); const Backend = require(‘i18next-http-backend’); const middleware = require(‘i18next-express-middleware’); i18next .use(Backend) .use(middleware.LanguageDetector) .init({ fallbackLng: ‘en’, backend: { loadPath: __dirname + ‘/locales/{{lng}}/{{ns}}.json’, addPath: __dirname + ‘/locales/{{lng}}/{{ns}}.missing.json’, }, detection: { order: [‘querystring’, ‘cookie’], caches: [‘cookie’], }, }); […]