自定义警报只工作一次

Question

我已经在 React Native 中使用 Modal 创建了自定义警报，但它只呈现一次。这是我的组件

import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';

const CustomAlert = props => {
  const {title, msg, visible} = props;
  const [alert, setAlert] = useState(visible);
  return (
    <View>
      <Modal
        animationType="fade"
        transparent={true}
        visible={alert}>
        <TouchableOpacity
          style={styles.centeredView}
          onPress={() => {
            // setAlert(false);
          }}>
          <View style={styles.modalView}>
            <Text>{title}</Text>
            <Text>{msg}</Text>
            <TouchableOpacity
              onPress={() => setAlert(false)}>
              <Text style={styles.btnText}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

这就是我在屏幕上呈现的方式

const [alert, setAlert] = useState(false);
const submit = () => {
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
    if (!name) {
      setAlert(true);
      return;
    }}

并在return屏幕上

{alert && <CustomAlert title="asdasd" msg="asd23" visible={alert} />}

在 m 屏幕中，当我单击按钮以呈现此警报时，它只有效一次，我已经记录了 props whis 也显示一次

编辑 @Thinker 的答案有效，但如何从操作中呈现此 customAlert 组件？如果一个动作或 api 调用完成，如何呈现此组件并在任何屏幕中显示消息，因为 redux 中的动作不允许在那里呈现组件，因为它们不是反应功能组件....

Answer 1

setAlert(true) 不会 trigger/update alert 值，因为它在触发一次时已经 true 了。（因为useState不会再更新同一个变量值）

您可以通过直接触发 CustomModal 的 onPress 中的 setAlert 来更改 alert 来实现您的目标。像这样的（我没有运行，但我的逻辑如下）：

这将是您的主要组成部分:

import { Text, View } from 'react-native';
import React, { useState } from 'react';

const MainComponent = () => {
  const [alert, setAlert] = useState(false);

  const submit = () => {
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
    if (!name) {
      setAlert(true);
      return;
    }
  };

  return (
    <View>
      {' '}
      {alert && (
        <CustomAlert
          title="asdasd"
          msg="asd23"
          visible={alert}
          onPress={(value) => setAlert(value)}
        />
      )}{' '}
    </View>
  );
};

这是 CustomAlert:

import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';

const CustomAlert = props => {
  const {title, msg, visible, onPress} = props;

  return (
    <View>
      <Modal
        animationType="fade"
        transparent={true}
        visible={alert}>
        <TouchableOpacity
          style={styles.centeredView}
          onPress={() => {
            // setAlert(false);
          }}>
          <View style={styles.modalView}>
            <Text>{title}</Text>
            <Text>{msg}</Text>
            <TouchableOpacity
              onPress={() => onPress(false)}>
              <Text style={styles.btnText}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

自定义警报只工作一次

Custom Alert works only once

reactjs

react-native