React Native Modal 沒有隱藏

Question

我正在實現自己的 Modal，試圖用更漂亮的東西替換 Alert.alert。 我讓它在需要時顯示，但它並沒有隱藏在按鈕按下，但我想我將它轉移到所需的 function。 我的模態結構如下：

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()時，它會按原樣顯示，但是當我按下確定按鈕時，它並沒有隱藏。 我該如何解決？

Answer 1

答案是要設置一個 function 像一個 state 變量，我需要設置它像setAlertOnPress(() => () => setAlertVisible(false)) (2 x () => )

Answer 2

您可以使用setAlertVisible更改alertVisible state：

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