React -Cnitals - newarchebabled ⇐ Android

[Anonymous]

Почему есть проблема с новой архитектурой Android? После нажатия второй категории переключение больше не работает, блокируя переход. У iOS нет этой проблемы. < /p>
import React, { useRef, useState, useCallback, useMemo } from 'react';
import { View, ScrollView, FlatList, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';

const { height: screenHeight } = Dimensions.get('window');

const CATEGORIES = [
{ id: 1, title: 'Appetizers', color: '#FF6B6B' },
{ id: 2, title: 'Main Courses', color: '#4ECDC4' },
{ id: 3, title: 'Desserts', color: '#45B7D1' },
{ id: 4, title: 'Beverages', color: '#96CEB4' },
{ id: 5, title: 'Specials', color: '#FECA57' }
];

const ITEMS_PER_CATEGORY = 8;

export default function ScrollViewAnchorExample() {
const scrollViewRef = useRef(null);
const [selectedCategoryId, setSelectedCategoryId] = useState(1);
const [categoryPositions, setCategoryPositions] = useState(new Map());
const [showTitleInHeader, setShowTitleInHeader] = useState(false);
const [headerPosition, setHeaderPosition] = useState(0);
const [isScrolling, setIsScrolling] = useState(false); // Добавляем флаг скролла
const lastScrollY = useRef(0); // Для throttling

// Скролл к якорю категории с проверками
const scrollToCategory = useCallback((categoryId: number) => {
console.log('=== CATEGORY SELECT DEBUG ===');
console.log('Selected category:', categoryId);
console.log('Current selectedCategoryId:', selectedCategoryId);
console.log('Timestamp:', Date.now());

const categoryPosition = categoryPositions.get(categoryId);
console.log('Category position for', categoryId, ':', categoryPosition);

if (categoryPosition !== undefined && scrollViewRef.current) {
const offsetY = Math.max(0, categoryPosition - 100);
console.log('Scrolling to offsetY:', offsetY);

// Сразу обновляем категорию без задержек
setSelectedCategoryId(categoryId);

// Простой скролл без флагов блокировки
scrollViewRef.current.scrollTo({
y: offsetY,
animated: true
});
}
console.log('================================');
}, [categoryPositions, selectedCategoryId]);

// Обработчик layout категории для сохранения позиции якоря
const handleCategoryLayout = useCallback((categoryId: number) => {
return (event: any) => {
const { y } = event.nativeEvent.layout;
console.log(` Category ${categoryId} layout at y:`, y);
setCategoryPositions(prev => new Map(prev.set(categoryId, y)));
};
}, []);

// Обработчик скролла с throttling
const handleScroll = useCallback((event: any) => {
const scrollY = event.nativeEvent.contentOffset.y;

// Throttling для уменьшения частоты обновлений
if (Math.abs(scrollY - lastScrollY.current) < 5) return;
lastScrollY.current = scrollY;

// Показываем заголовок в header при скролле
setShowTitleInHeader(scrollY > headerPosition + 50);

// ОТКЛЮЧАЕМ автоматическое определение категории - это вызывает конфликты
// Оставляем только ручное управление через нажатия
}, [headerPosition]);

const handleHeaderLayout = useCallback((event: any) => {
const { y } = event.nativeEvent.layout;
setHeaderPosition(y);
console.log(' Header position set to:', y);
}, []);

// Обработчик завершения скролла
const handleMomentumScrollEnd = useCallback(() => {
console.log(' Scroll momentum ended');
}, []);

// Обработчик начала скролла пользователем
const handleScrollBeginDrag = useCallback(() => {
console.log(' User started dragging scroll');
}, []);

// Мемоизированные элементы категорий для производительности
const categoryItems = useMemo(() => CATEGORIES, []);

return (

{/* Основной заголовок */}


{showTitleInHeader ? 'Menu Categories' : 'Restaurant Menu'}

{/* Добавляем индикатор состояния для отладки */}

Category: {selectedCategoryId} | Scrolling: {isScrolling ? 'YES' : 'NO'}




{/* Заголовочная секция */}

Welcome to Our Restaurant
Delicious food awaits you


{/* Sticky Header с категориями */}

item.id.toString()}
contentContainerStyle={styles.categoriesContainer}
renderItem={({ item: category }) => (
{
console.log(' TouchableOpacity pressed for category:', category.id);
scrollToCategory(category.id);
}}
activeOpacity={0.7}
>

{category.title}


)}
/>


{/* Контент с категориями */}

{categoryItems.map((category) => (


{category.title}


{/* Элементы в категории */}
{Array.from({ length: ITEMS_PER_CATEGORY }, (_, index) => (


{category.title} Item {index + 1}


Description of the delicious {category.title.toLowerCase()} item


${(Math.random() * 20 + 5).toFixed(2)}


))}

))}





);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
},
header: {
backgroundColor: '#000',
paddingHorizontal: 16,
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: '#333',
},
headerTitle: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
// Добавляем стиль для отладочного текста
debugText: {
color: '#666',
fontSize: 12,
marginTop: 4,
},
heroSection: {
backgroundColor: '#1a1a1a',
padding: 32,
alignItems: 'center',
minHeight: 200,
justifyContent: 'center',
},
heroTitle: {
color: 'white',
fontSize: 28,
fontWeight: 'bold',
marginBottom: 8,
textAlign: 'center',
},
heroSubtitle: {
color: '#ccc',
fontSize: 16,
textAlign: 'center',
},
stickyHeader: {
backgroundColor: '#000',
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: '#333',
},
categoriesContainer: {
paddingHorizontal: 16,
},
categoryChip: {
backgroundColor: '#333',
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
marginRight: 12,
},
categoryChipActive: {
backgroundColor: '#007AFF',
},
categoryText: {
color: '#ccc',
fontWeight: '500',
fontSize: 14,
},
categoryTextActive: {
color: 'white',
fontWeight: 'bold',
},
contentContainer: {
backgroundColor: '#000',
minHeight: screenHeight,
},
categorySection: {
paddingHorizontal: 16,
paddingTop: 24,
},
categoryTitle: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
paddingBottom: 8,
borderBottomWidth: 2,
borderBottomColor: 'currentColor',
},
menuItem: {
backgroundColor: '#1a1a1a',
padding: 16,
marginBottom: 12,
borderRadius: 8,
borderLeftWidth: 4,
},
itemTitle: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
marginBottom: 4,
},
itemDescription: {
color: '#ccc',
fontSize: 14,
marginBottom: 8,
lineHeight: 20,
},
itemPrice: {
color: '#4CAF50',
fontSize: 16,
fontWeight: 'bold',
},
bottomSpacing: {
height: 100,
},
});```

< /code>
{
"name": "rnkc-sandbox",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo Запустить: iOS ",
" web ":" expo start-web "
},
" зависимости ": {
"@sentry /react-родной ":"^6.21.0 ",
" expo ":" ~ 54.0.7 ",
" Expo-status-bar ":" ~ 3.0.8 ",
" rue-int "~ 3.0.8",
"ruec-'rey-int" ~ 3.0.8 ",
" expo-status-bar " "19.1.0",
"React-National": "0.81.4",
"React-Cantive-Gesture-Handler": "^2,28,0",
"React-Cempure-Keyboard-Controller": "1.18.5",
"react-native-rane-rane-rean-rane-native" ~ 4,1, /> «Реактивно-родной-са-контекст»: «~ 5.6.0»,
«Реактивные и ведущие работы»: «0.5.1»,
«sentry-expo»: «^7.2.0»
},
«личный»: true,
devePendenties »: {
»@@@@@@@@@@@@@@@@@@@@@@@@@react. "^19.1.13",
"babel-preset-expo": "^54.0.1",
"typescript": "~ 5.9.2"
}
} < /p>
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-worklets/plugin'], // ← последний
};
};
< /code>


Подробнее здесь: https://stackoverflow.com/questions/797 ... rchebabled