Wie kann ich das erneute Rendern von map() stoppen? ⇐ IOS

[Guest]

Ich habe eine App, in der ich Miniaturansichten über eine Karte rendere und sie in eine Funktion verbinde, die dann mit der Bildpresse umgeht. Das Problem ist, dass ich beim Aufrufen der Ansicht statt der 29 Miniaturansichten, die ich zugeordnet habe, 58 Bilder erhalte. Und sie werden alle ohne Wert dupliziert.
Bsp. Ich tippe auf das erste Bild und es erkennt, dass es Bild Nummer 0 ist und kümmert sich dann um den Rest.
Ich tippe auf Bild Nummer 30 und es erkennt, dass es Bild Nummer 0 ist, aber dann passiert nichts.
Ich habe versucht, diesen Teil zu übernehmen und mit React.memo eine neue untergeordnete Komponente zu erstellen, aber das hat nur dazu geführt, dass die doppelten Bilder nicht mehr den Stil der Originalbilder haben, sondern nicht in einem Raster angezeigt werden Sie arrangieren einfach eins unten ein anderer.
Hier ist mein Code (ich habe nicht unbedingt alles eingefügt, da ich andere Teile habe, die nicht relevant sind):

Code: Select all

function VideosScreen({ navigation }) {
const video = React.useRef(null);

<
const [videos, setVideos] = useState([]); -
const [modalVisible, setModalVisible] = useState(false);
const [youtubeLink, setYoutubeLink] = useState("");
> - from a different part but may be useful for context

const imageURL = [
require("../assets/images/video_thumbnails/w1.jpg"),
[..28 other thumbnails..]
];

const handleImagePress = (index) => {
navigation.navigate(
"IndividualVideo",
{ pathing: index },
{ imageIndex: index }
);
console.log(index, "in videos.js");
};

return (



{imageURL.map((imageURL, index) => (
handleImagePress(index)}>



[..]

const styles = StyleSheet.create({
[..]
container: {
marginTop: 20,
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
rowGap: 10,
columnGap: 10,
fontFamily: "Avenir",
},
item: {
width: 384,
height: 216,
},

Was ist das Problem? Vielen Dank