1import React, {Fragment} from 'react'; 2import {Pressable, StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from '@/components/base/themeText'; 5 6import {useSafeAreaInsets} from 'react-native-safe-area-context'; 7import PanelBase from '../base/panelBase'; 8import {ScrollView} from 'react-native-gesture-handler'; 9import {hidePanel} from '../usePanel'; 10import Divider from '@/components/base/divider'; 11import PanelHeader from '../base/panelHeader'; 12 13interface IPlayRateProps { 14 /** 点击回调 */ 15 onRatePress: (rate: number) => void; 16} 17 18const rates = [50, 75, 100, 125, 150, 175, 200]; 19 20export default function PlayRate(props: IPlayRateProps) { 21 const {onRatePress} = props ?? {}; 22 23 const safeAreaInsets = useSafeAreaInsets(); 24 25 return ( 26 <PanelBase 27 height={rpx(520)} 28 renderBody={() => ( 29 <> 30 <PanelHeader title="播放速度" hideButtons /> 31 <ScrollView 32 style={[ 33 style.body, 34 {marginBottom: safeAreaInsets.bottom}, 35 ]}> 36 {rates.map(key => { 37 return ( 38 <Fragment key={`frag-${key}`}> 39 <Pressable 40 key={`btn-${key}`} 41 style={style.item} 42 onPress={() => { 43 onRatePress(key); 44 hidePanel(); 45 }}> 46 <ThemeText>{key / 100}x</ThemeText> 47 </Pressable> 48 </Fragment> 49 ); 50 })} 51 <Divider /> 52 </ScrollView> 53 </> 54 )} 55 /> 56 ); 57} 58 59const style = StyleSheet.create({ 60 header: { 61 width: '100%', 62 flexDirection: 'row', 63 padding: rpx(24), 64 }, 65 body: { 66 flex: 1, 67 paddingHorizontal: rpx(24), 68 }, 69 item: { 70 height: rpx(96), 71 justifyContent: 'center', 72 }, 73}); 74