«com.facebook.react.bridge.ReadableNativeMap не может быть преобразован в java.lang.string» при отображении изображений, ⇐ JAVA

[Anonymous]

Я показываю мемы, полученные с Reddit, и каждый раз, когда пользователь проводит пальцем по экрану, случайный .jpg извлекается из кеша приложения.
Я получаю сообщение об ошибке com.facebook. response.bridge.ReadableNativeMap не может быть приведен к java.lang.string, хотя я вижу, что результат кода кажется правильным, в течение 1 секунды до появления ошибки....
Я храню мемы Reddit на GitHub, а мемы в формате jpg находятся в кеше, поэтому для их получения я использую RNFS, и они должны поочередно отображаться каждый раз, когда пользователь проводит пальцем по экрану.
useEffect(() => {
console.log('Fetching Reddit memes...');
const fetchMemes = async () => {
try {
const response = await fetch('https://raw.githubusercontent.com/Rayli ... Memes.json');
const data = await response.json();
setMemes(data.memes);
console.log('Fetched Reddit memes:', data.memes);
setLoading(false);
} catch (error) {
console.error('Error fetching Reddit memes:', error);
setLoading(false);
}
};
fetchMemes();
}, []);

useEffect(() => {
console.log('Fetching cached images...');
const fetchCachedImages = async () => {
try {
const cacheDir = RNFS.CachesDirectoryPath;
const files = await RNFS.readDir(cacheDir);
const jpegFiles = files.filter(file => file.name.endsWith('.jpg')).map(file => `file://${file.path}`);
setCachedImages(jpegFiles);
console.log('Fetched cached images:', jpegFiles);
} catch (error) {
console.error('Error fetching cached images:', error);
}
};
fetchCachedImages();
}, []);

useEffect(() => {
console.log('Combining Reddit memes and cached images...');
const combined = [];
let redditIndex = 0;
let cachedIndex = 0;
let addReddit = true; // Flag to alternate between Reddit and cached memes

// Limit to first 100 memes
const maxMemes = 100;

// Ensure that we only use 100 memes from both Reddit and cache
while ((redditIndex < memes.length && combined.length < maxMemes) ||
(cachedIndex < cachedImages.length && combined.length < maxMemes)) {
if (addReddit && redditIndex < memes.length && combined.length < maxMemes) {
combined.push({ type: 'reddit', meme: memes[redditIndex] });
console.log(`Added Reddit meme at index ${redditIndex}`);
redditIndex++;
} else if (!addReddit && cachedIndex < cachedImages.length && combined.length < maxMemes) {
combined.push({ type: 'cache', meme: cachedImages[cachedIndex] });
console.log(`Added cached image at index ${cachedIndex}`);
cachedIndex++;
}
addReddit = !addReddit; // Alternate between Reddit and cache
}

setCombinedMemes(combined);
console.log('Combined memes (first 100):', combined);
}, [memes, cachedImages]);

useEffect(() => {
console.log('Loading combined memes...');
const loadIndex = async () => {
const storedIndex = await AsyncStorage.getItem('currentIndex');
if (storedIndex) {
setCurrentIndex(parseInt(storedIndex));
}
};
loadIndex();
}, []);

const handleSwipe = async () => {
let nextIndex = currentIndex + 1;
console.log(`Swiping: Current index ${currentIndex}, Next index ${nextIndex}`);

// Si tous les memes ont été vus, réinitialiser les memes vus et charger le prochain lot de 100 memes
if (seenMemes.size >= combinedMemes.length) {
console.log('All memes seen, resetting seen memes...');
setSeenMemes(new Set());

// Charger les 100 memes suivants
await fetchNextBatch();
}

// Sauter les memes déjà vus
while (nextIndex < combinedMemes.length && seenMemes.has(combinedMemes[nextIndex])) {
console.log(`Skipping seen meme at index ${nextIndex}`);
nextIndex++; // Passer les memes déjà vus
}

// Si le meme suivant est dans les limites
if (nextIndex < combinedMemes.length) {
// Mettre à jour l'index sans animation
setCurrentIndex(nextIndex);
console.log(`New meme at index ${nextIndex}`);

// Ajouter le meme à l'ensemble des memes vus
setSeenMemes(new Set(seenMemes.add(combinedMemes[nextIndex])));

// Sauvegarder l'index actuel dans AsyncStorage
await AsyncStorage.setItem('currentIndex', nextIndex.toString());
} else {
console.log('No more memes available!');
}
};

const fetchNextBatch = async () => {
// Fetch the next batch of 100 memes
const startIndex = combinedMemes.length; // Start after the current batch
const endIndex = startIndex + 100; // Limit to 100 memes

let newMemes = [];
let redditIndex = startIndex;
let cachedIndex = startIndex;
let addReddit = true;

// Fetch the next 100 memes from Reddit and cache
while ((redditIndex < memes.length && newMemes.length < 100) ||
(cachedIndex < cachedImages.length && newMemes.length < 100)) {
if (addReddit && redditIndex < memes.length && newMemes.length < 100) {
newMemes.push({ type: 'reddit', meme: memes[redditIndex] });
console.log(`Added Reddit meme at index ${redditIndex}`);
redditIndex++;
} else if (!addReddit && cachedIndex < cachedImages.length && newMemes.length < 100) {
newMemes.push({ type: 'cache', meme: cachedImages[cachedIndex] });
console.log(`Added cached image at index ${cachedIndex}`);
cachedIndex++;
}
addReddit = !addReddit; // Alternate between Reddit and cache
}

// Append the new memes to the combined memes
setCombinedMemes(prevMemes => [...prevMemes, ...newMemes]);
console.log('New combined memes:', newMemes);
};

const renderMeme = () => {
// Make sure combinedMemes has memes before trying to render
if (!combinedMemes || combinedMemes.length === 0) {
return No memes available; // Show a fallback message if there are no memes
}

const currentMeme = combinedMemes[currentIndex];

// If currentMeme is undefined, return a fallback message
if (!currentMeme) {
return Loading...;
}

// Check if type exists before accessing it
if (currentMeme.type === 'reddit') {
return ;
} else if (currentMeme.type === 'cache') {
return ;
}

return null;
};


Подробнее здесь: https://stackoverflow.com/questions/793 ... ang-string