feat：支持身体围度数据展示
This commit is contained in:
richarjiang
122
components/ui/FloatingSelectionCard.tsx
Normal file
122
components/ui/FloatingSelectionCard.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import React from 'react';
|
||||
import {
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
interface FloatingSelectionCardProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function FloatingSelectionCard({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
children
|
||||
}: FloatingSelectionCardProps) {
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent={true}
|
||||
animationType="fade"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<BlurView intensity={20} tint="dark" style={styles.overlay}>
|
||||
<TouchableOpacity
|
||||
style={styles.backdrop}
|
||||
activeOpacity={1}
|
||||
onPress={onClose}
|
||||
/>
|
||||
|
||||
<View style={styles.container}>
|
||||
<BlurView intensity={80} tint="light" style={styles.blurContainer}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
{children}
|
||||
</View>
|
||||
</BlurView>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.closeButton}
|
||||
onPress={onClose}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.closeButtonInner}>
|
||||
<Ionicons name="close" size={24} color="#666" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
backdrop: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
blurContainer: {
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
minWidth: 340,
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 16,
|
||||
minHeight: 100,
|
||||
},
|
||||
header: {
|
||||
paddingBottom: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#636161ff',
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
closeButton: {
|
||||
marginTop: 20,
|
||||
},
|
||||
closeButtonInner: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
});
|
||||
57
components/ui/FloatingSelectionModal.tsx
Normal file
57
components/ui/FloatingSelectionModal.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { FloatingSelectionCard } from './FloatingSelectionCard';
|
||||
import { SlidingSelection, SelectionItem } from './SlidingSelection';
|
||||
|
||||
interface FloatingSelectionModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
items: SelectionItem[];
|
||||
selectedValue?: string | number;
|
||||
onValueChange: (value: string | number, index: number) => void;
|
||||
onConfirm?: (value: string | number, index: number) => void;
|
||||
showConfirmButton?: boolean;
|
||||
confirmButtonText?: string;
|
||||
pickerHeight?: number;
|
||||
}
|
||||
|
||||
export function FloatingSelectionModal({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
items,
|
||||
selectedValue,
|
||||
onValueChange,
|
||||
onConfirm,
|
||||
showConfirmButton = true,
|
||||
confirmButtonText = '确认',
|
||||
pickerHeight = 150,
|
||||
}: FloatingSelectionModalProps) {
|
||||
const handleConfirm = (value: string | number, index: number) => {
|
||||
if (onConfirm) {
|
||||
onConfirm(value, index);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<FloatingSelectionCard
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
>
|
||||
<SlidingSelection
|
||||
items={items}
|
||||
selectedValue={selectedValue}
|
||||
onValueChange={onValueChange}
|
||||
onConfirm={handleConfirm}
|
||||
showConfirmButton={showConfirmButton}
|
||||
confirmButtonText={confirmButtonText}
|
||||
height={pickerHeight}
|
||||
/>
|
||||
</FloatingSelectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
// Export types for convenience
|
||||
export type { SelectionItem } from './SlidingSelection';
|
||||
131
components/ui/SlidingSelection.tsx
Normal file
131
components/ui/SlidingSelection.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import WheelPickerExpo from 'react-native-wheel-picker-expo';
|
||||
|
||||
export interface SelectionItem {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface SlidingSelectionProps {
|
||||
items: SelectionItem[];
|
||||
selectedValue?: string | number;
|
||||
onValueChange: (value: string | number, index: number) => void;
|
||||
onConfirm?: (value: string | number, index: number) => void;
|
||||
showConfirmButton?: boolean;
|
||||
confirmButtonText?: string;
|
||||
height?: number;
|
||||
itemTextStyle?: any;
|
||||
selectedIndicatorStyle?: any;
|
||||
}
|
||||
|
||||
export function SlidingSelection({
|
||||
items,
|
||||
selectedValue,
|
||||
onValueChange,
|
||||
onConfirm,
|
||||
showConfirmButton = true,
|
||||
confirmButtonText = '确认',
|
||||
height = 150,
|
||||
itemTextStyle,
|
||||
selectedIndicatorStyle
|
||||
}: SlidingSelectionProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(() => {
|
||||
if (selectedValue !== undefined) {
|
||||
const index = items.findIndex(item => item.value === selectedValue);
|
||||
return index >= 0 ? index : 0;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const handleValueChange = (index: number) => {
|
||||
setCurrentIndex(index);
|
||||
const selectedItem = items[index];
|
||||
if (selectedItem) {
|
||||
onValueChange(selectedItem.value, index);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
const selectedItem = items[currentIndex];
|
||||
if (selectedItem && onConfirm) {
|
||||
onConfirm(selectedItem.value, currentIndex);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.pickerContainer, { height }]}>
|
||||
<WheelPickerExpo
|
||||
height={height}
|
||||
width={300}
|
||||
initialSelectedIndex={currentIndex}
|
||||
items={items.map(item => ({ label: item.label, value: item.value }))}
|
||||
onChange={({ item, index }) => handleValueChange(index)}
|
||||
backgroundColor="transparent"
|
||||
haptics
|
||||
/>
|
||||
</View>
|
||||
|
||||
{showConfirmButton && (
|
||||
<TouchableOpacity
|
||||
style={styles.confirmButton}
|
||||
onPress={handleConfirm}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.confirmButtonText}>{confirmButtonText}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
pickerContainer: {
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
picker: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
fontWeight: '500',
|
||||
},
|
||||
selectedIndicator: {
|
||||
backgroundColor: 'rgba(74, 144, 226, 0.1)',
|
||||
borderRadius: 8,
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: '#4A90E2',
|
||||
paddingHorizontal: 32,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 20,
|
||||
marginTop: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 4,
|
||||
elevation: 4,
|
||||
},
|
||||
confirmButtonText: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user