refactor(ImageGallery, HomeScreen, PostService, UserStore): streamline post type handling and improve tab navigation
- Updated ImageGallery to manage loading states more effectively and prevent unnecessary updates. - Refactored HomeScreen to remove the 'recommend' post type, simplifying the post type options. - Adjusted PostService and UserStore to eliminate references to 'recommend', ensuring consistency across the application. - Enhanced tab navigation in SimpleMobileTabNavigator to optimize rendering and manage mounted tabs more efficiently. - Improved error handling and loading states in various components for better user experience.
This commit is contained in:
@@ -86,7 +86,9 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
|
||||
}) => {
|
||||
const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const isClosingRef = useRef(false);
|
||||
const currentIndexRef = useRef(initialIndex);
|
||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||
currentIndexRef.current = currentIndex;
|
||||
const [showControls, setShowControls] = useState(true);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
@@ -152,16 +154,19 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 图片变化时重置加载状态和缩放
|
||||
// 图片变化时重置缩放(加载态在 updateIndex / 打开弹窗时同步设置,避免晚一帧仍显示上一张)
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
setError(false);
|
||||
resetZoom();
|
||||
}, [currentImage?.id, resetZoom]);
|
||||
|
||||
const updateIndex = useCallback(
|
||||
(newIndex: number) => {
|
||||
const clampedIndex = Math.max(0, Math.min(validImages.length - 1, newIndex));
|
||||
if (clampedIndex === currentIndexRef.current) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(false);
|
||||
setCurrentIndex(clampedIndex);
|
||||
onIndexChange?.(clampedIndex);
|
||||
},
|
||||
@@ -412,7 +417,8 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
|
||||
contentFit="contain"
|
||||
cachePolicy="disk"
|
||||
priority="high"
|
||||
recyclingKey={currentImage.id}
|
||||
recyclingKey={currentImage.url}
|
||||
transition={null}
|
||||
allowDownscaling
|
||||
onLoadStart={() => setLoading(true)}
|
||||
onLoad={() => {
|
||||
@@ -556,11 +562,13 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 5,
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
errorContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
errorText: {
|
||||
color: '#999',
|
||||
|
||||
Reference in New Issue
Block a user