커스텀 아이콘

VPE React Native SDK는 ControlBar의 모든 기본 아이콘을 사용자 정의 아이콘(JSX, 원격 이미지 URL, 로컬 require 이미지, 함수형 렌더러)으로 교체할 수 있는 IconOverrides 시스템을 제공합니다.

AndroidiOS

Breaking change: 기존 props.icon은 폐지되었습니다. 이제 options.icon으로 전달합니다.

아이콘 값 타입 (IconValue)

ReactNode — JSX 직접 전달
string — 원격 이미지 URL → 내부적으로 <Image source={{uri}} /> 렌더
number — require('./icon.png') 결과 → 로컬 이미지
() => ReactNode — 동적 렌더링용 함수형

사용 가능한 키

아래 키들은 ControlBar의 기본 컨트롤 컴포넌트들이 참조하는 아이콘 이름입니다.

키	설명
bigPlay	중앙 큰 재생 버튼
play	재생
pause	일시정지
replay	재생 종료 후 다시보기
prev	이전 트랙
next	다음 트랙
subtitle	자막 ON
subtitleOff	자막 OFF
fullscreen	전체화면 진입
fullscreenExit	전체화면 종료
volumeFull	음량 최대
volumeMid	음량 중간
volumeMute	음소거
setting	설정
back	뒤로가기
share	공유
skipForward	10초 앞으로
skipBack	10초 뒤로

JSX로 교체

import { VpePlayer } from 'vpe-react-native';
import { PlayIcon, PauseIcon } from 'phosphor-react-native';

export default function MyPlayer() {
    return (
        <VpePlayer
            accessKey={'YOUR_ACCESS_KEY'}
            options={{
                playlist: [{ file: 'https://CDN도메인/master.m3u8' }],
                icon: {
                    play: <PlayIcon size={28} color="#ffffff" weight="fill" />,
                    pause: <PauseIcon size={28} color="#ffffff" weight="fill" />,
                },
            }}
        />
    );
}

이미지로 교체

<VpePlayer
    accessKey={'YOUR_ACCESS_KEY'}
    options={{
        playlist: [{ file: 'https://CDN도메인/master.m3u8' }],
        icon: {
            // 원격 이미지 URL (string)
            play: 'https://example.com/icons/play.png',
            // 로컬 이미지 (require → number)
            pause: require('./assets/pause.png'),
            // 함수형 렌더러
            fullscreen: () => <MyFullscreenIcon />,
        },
    }}
/>