Modals React Native 的问题

Question

各位。我是这个新技术的新手，我在模态方面遇到了一些问题。

我正在编写一个仅在条件为真时才显示的模态，第一次点击一切正常，但第二次模态不显示，然后当我再次点击时，window再次出现，依次继续

代码的工作原理如下：我有 3 个状态，每个状态代表一个不同的文本以显示在模式中。然后，我有一个模态，它接收一条消息（打印）和状态来标识我需要显示的状态。最后，总的来说，我有一个条件调用模态并仅在状态为真时显示它。

我用console.log检查了状态，我发现的唯一问题是在某些情况下，状态设置为真，什么时候为假，但我不知道为什么！

感谢阅读！

这里我分离了部分代码。

主状态声明

const [modalVisibleEnTermino, setModalVisibleEnTermino] = useState(false)

const [modalVisibleFueraTermino, setModalVisibleFueraTermino] = useState(false)

const [modalVisibleRefuerzoTermino, setModalVisibleRefuezoTermino] = useState(false)

主要显示模态的适当状态的条件

const setModal = () => {
    vacunas ===2 && (days>6 && days<150) ? setModalVisibleEnTermino(true) : setModalVisibleFueraTermino(true)
    if(vacunas == 3)
        setModalVisibleRefuezoTermino(true)
}

显示模态后重置状态的功能（如果正常则为 IDK）

 const restoreModals = () => {
    if (modalVisibleEnTermino) setModalVisibleEnTermino(false)
    if (modalVisibleFueraTermino) setModalVisibleFueraTermino(false)
    if (modalVisibleRefuerzoTermino) setModalVisibleRefuezoTermino(false)
}

设置模态后，我检查了它是什么状态，并在这种情况下传递了值

{modalVisibleEnTermino && <MyModal
                    message={"Mensaje1"}
                    state={modalVisibleEnTermino}
                    />
                }

                {modalVisibleFueraTermino && <MyModal
                    message={"Mensaje2."}
                    state={modalVisibleFueraTermino}
                    />
                }

                {modalVisibleRefuerzoTermino && <MyModal
                    message={"Mensaje3."}
                    state={modalVisibleRefuerzoTermino}
                    />
                }

模态

export const MyModal = (props) => {

const [visibleModal, setVisibleModal] = useState(props.state)
return (
  <Modal visible={visibleModal}
        transparent={true}
        animationType='slide'
        >
      <View style={styles.container}>
        <Text style={styles.titulo_label}>¡IMPORTANTE!</Text>
        <Text style={styles.info_label}>{props.message}</Text>
        <TouchableOpacity style={styles.button_aceptar} onPress={() => setVisibleModal(false)}>
          <Text style={styles.text_button}>Aceptar</Text>
        </TouchableOpacity>
      </View>
  </Modal>
);

Answer 1

向您的 MyModal 组件添加恢复属性

{modalVisibleEnTermino && <MyModal
                    message={"Mensaje1"}
                    state={modalVisibleEnTermino}
                    restore={restoreModals}
                    />
                }

                {modalVisibleFueraTermino && <MyModal
                    message={"Mensaje2."}
                    state={modalVisibleFueraTermino}
                    restore={restoreModals}
                    />
                }

                {modalVisibleRefuerzoTermino && <MyModal
                    message={"Mensaje3."}
                    state={modalVisibleRefuerzoTermino}
                    restore={restoreModals}
                    />
                }

在 MyModal 组件中删除 useState 并将 props.state 传递给 visible 并在 onPress 回调中使用 props.restore 像这样

export const MyModal = (props) => {

return (
  <Modal visible={props.state}
        transparent={true}
        animationType='slide'
        >
      <View style={styles.container}>
        <Text style={styles.titulo_label}>¡IMPORTANTE!</Text>
        <Text style={styles.info_label}>{props.message}</Text>
        <TouchableOpacity style={styles.button_aceptar} onPress={() => props.restore()}>
          <Text style={styles.text_button}>Aceptar</Text>
        </TouchableOpacity>
      </View>
  </Modal>
);

在您原来的 MyModal 组件中，通过将 props.state 传递给 useState，您将在该组件中创建一个新状态。将 onPress 设置为 setVisibleModal(false) 不会改变 modalVisibleEnTermino、modalVisibleFueraTermino 和 modalVisibleRefuerzoTermino 的状态。通过将 restoreModals 作为 prop 传递给 MyModal，您可以从 MyModal 内部更改 Main 组件中的状态。

还有一件事，删除 restoreModals 函数中的 if 语句

 const restoreModals = () => {
    setModalVisibleEnTermino(false)
    setModalVisibleFueraTermino(false)
    setModalVisibleRefuezoTermino(false)
}

Modals React Native 的问题

Issues with Modals React Native

reactjs

state

native