Swispritierbare Aktionen falsch ausgerichtet oder pinkeln beim Hinzufügen neuer Gegenstände mit Polsterung in React -nat ⇐ JavaScript

[Anonymous]

Ich verwende erneut mit React-Native-Consture-Handler mit React Native und Expo. Jedes To-Do-Element in meiner Flatlist verfügt über eine interne Polsterung (z. B. PX-4) für den visuellen Abstand. Das Problem ist: Wenn ich ein neues Element hinzufüge, stieg die Tasten der richtigen Aktion (z. B. bearbeiten/löschen) kurz „Peek Out“ oder erscheinen falsch ausgerichtet, bis ich erneut mit der Liste interagiere. View
Setzen Sie explizit W- [96px] (oder ähnlich), um der Breite von zwei Schaltflächen zu entsprechen, obwohl diese Art von Funktionen eine billige Lösung ist, und ich möchte wissen, wie man es richtig macht.

Code: Select all

import { View, TextInput, FlatList, Pressable } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context';
import React, { useState } from 'react'
import { Plus, Pencil, X } from 'lucide-react-native';
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

const Home = () => {

type Todo = {
_id: string;
text: string;
completed: boolean;
};

const  [todos, setTodos] = useState([]);

const handleAddTodo = () => {

const newTodo = {
_id: Date.now().toString(),
text: '',
completed: false
}

setTodos(prev => [...prev, newTodo]);

}

const renderRightActions = () => (








);

return (

 item._id}
ItemSeparatorComponent={() => }
renderItem={({ item }) => (



 {
setTodos(prevTodos =>
prevTodos.map(todo =>
todo._id === item._id ? { ...todo, text } : todo
)
);
}}
/>


)}
/>





)
}

export default Home