РЕШЕНО - Пытается создать конкретное c модальное всплывающее окно для каждого элемента в списке сопоставленных массивов при нажатии - React Native

Question

У меня есть меню, в котором я создаю список кнопок для каждого файла в asyn c хранилище, однако я изо всех сил пытаюсь найти способ, чтобы на LongPress появлялось всплывающее окно «Подтвердить удаление». Я не знаю, как создать базовый модальный компонент, с помощью которого я могу передавать сведения об элементе на карту, так что, когда я долго нажимаю на определенный файл c, появится всплывающее окно, чтобы дать мне возможность удалить указанные c файл, который был нажат.

Понятия не имею, каков правильный подход. На данном этапе я даже не знаю, как сделать видимым модальное окно. Что я пробовал:

Вот моя карта:

{props.fileList.map((item) => {
    return(
         <TouchableOpacity 
               key={item.id} 
               style={styles.fileButton} 
               onLongPress={() => deletePopupHandler(item)} 
               onPress={() => loadFile(item)}>
                  <Text>
                      {item}
                  </Text>
         </TouchableOpacity>
                )
                })}

мой обработчик всплывающих окон удаления (я думаю, что здесь я делаю ошибку, я не знаю, как я может правильно передавать информацию об элементе с карты в функцию onLongPress):

    const deletePopupHandler = (item) => {
        console.log('indeletepopophandler')
        deletePopupContent = <DeletePopup 
                                popupVisible={popupVisible} 
                                setPopupVisible={setPopupVisible}
                                item={item}
                            />
        setPopupVisible(true)
    }

мой компонент «Удалить всплывающее окно» (еще не удосужился написать функцию кнопки «Да», так как я не могу заставить модальное окно отображаться с особенности элемента):

        <Modal visible={props.popupVisible} transparent={true}>
            <View style={styles.popupContainer}>
                <View style={styles.popupWindow}>
                    <Text style={styles.message}>
                        Delete?
                    </Text>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity style={styles.buttonYes}><Text>Yes</Text></TouchableOpacity>
                        <TouchableOpacity style={styles.buttonNo} onPress={() => props.setPopupVisible(false)}><Text>No</Text></TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>

Тогда у меня просто есть переменная {deletePopupContent} в функции возврата приложений.

Спасибо

EDIT - Нашел способ обойти это, хотя ответ ниже лучше Итак, я нашел способ, чтобы это сработало, если кто-то еще столкнется с тем же. Я удалил модальное окно из компонента и вместо этого обернул его вокруг {deletePopupContent}.

Итак, компонент изменен на:

            <View style={styles.popupContainer}>
                <View style={styles.popupWindow}>
                    <Text style={styles.message}>
                        Delete?
                    </Text>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity style={styles.buttonYes}><Text>Yes</Text></TouchableOpacity>
                        <TouchableOpacity style={styles.buttonNo} onPress={() => props.setPopupVisible(false)}><Text>No</Text></TouchableOpacity>
                    </View>
                </View>
            </View>

В моем возврате приложения у меня есть:

<Modal visible={popupVisible}>
   {deletePopupContent}
</Modal>

Answer 1

DeletePopup должен быть частью DOM, прежде чем он может отображаться. Поскольку вы используете visible = {props.popupVisible} для управления его видимостью, вы можете добавить всплывающее окно к вашему основному компоненту. Модал вообще работает? Вы можете установить для visible значение true для проверки. В deletePopupHandler вы можете сохранить выбранный элемент в состояние. Когда пользователь подтвердил, вы удаляете сохраненный элемент, в противном случае вы сбрасываете выбранный элемент на ноль. Посмотрите пример, который я сделал здесь. https://codesandbox.io/s/awesome-williamson-v7tug?file= / src / App. js