React Native Modal 没有隐藏答案

【问题标题】：React Native Modal is not hidingReact Native Modal 没有隐藏
【发布时间】：2021-12-31 13:56:49
【问题描述】：

我正在实现自己的 Modal，试图用更漂亮的东西替换 Alert.alert。我让它在需要时显示，但它并没有隐藏在按下按钮时，但我认为我将它转移到了所需的功能。我的模态结构如下：

export const RCModal = ({ title, visible, onButtonPress }) => {
  return (
    <Modal
      animationType='fade'
      transparent={true}
      visible={visible}
    >
      <View style={styles.container}>
        <Text style={styles.title}>{title}</Text>
        <Pressable style={styles.button} onPress={onButtonPress}>
          <Text style={styles.text}>OK</Text>
        </Pressable>
      </View>
    </Modal>
  )
};

它在应用程序中的使用方式如下：

// ...
  const [alertVisible, setAlertVisible] = useState(false);
  const [alertTitle, setAlertTitle] = useState();
  const [alertOnPress, setAlertOnPress] = useState();
// ...
  const winner = (theWinner) => {
    setBlocked(true);
    setAlertTitle(`${theWinner} win!`);
    setAlertOnPress(() => setAlertVisible(!alertVisible));
    setAlertVisible(true);
  }
// ...
  return (
    <View style={styles.container}>
      <RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
        <Text style={styles.title}>Noughts and Crosses</Text>
        <Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
        <View style={styles.buttonsContainer}>
          <Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
          <TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
            <Text style={styles.buttonText}>New game</Text>
          </TouchableHighlight>
        </View>
        <Field state={fieldState} size={fieldSize} onCellPress={onCellPress} />
      </ScrollView>
      <View style={styles.settingsButtonContainer}>
        <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
          <Image source={require('../img/settings.png')} style={styles.settingsIcon} />
        </TouchableHighlight>
      </View>
    </View>
  );
};

当winner() 被调用时，它会按原样显示，但是当我按下确定按钮时，它并没有隐藏。我该如何解决？

【问题讨论】：

标签： javascript react-native modal-dialog

【解决方案1】：

答案是，要将函数设置为状态变量，我需要将其设置为 setAlertOnPress(() => () => setAlertVisible(false)) (2 x () =>)

【讨论】：

【解决方案2】：

您可以使用setAlertVisible 更改alertVisible 状态：

<RCModal title={alertTitle} visible={alertVisible} onButtonPress={() => setAlertVisible(false)} />

【讨论】：