React Native CustomAlert 在 onPress 中不起作用

Question

我遇到了一个奇怪的问题。在我的本机反应应用程序中，我有 customAlert，它显示该语句是否为假，目前它仅显示 console. 我尝试测试并显示我的 CustomAlert 但不在 onPress 内部，它工作正常，如下图所示。但在 onPress 里面不起作用。我在这里错过了什么？

    import CustomAlert from '../components/CustomAlert';
    const [modalVisible, setModalVisible] = useState(false);

    <View style={{ marginTop: `30%`, alignItems: 'center' }}>
        <GoogleSigninButton
          style={{ width: 252, height: 58 }}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Dark}
          onPress={() => {
            if (fingerprint === true) {
              googleLogin();
            }
            else {
              console.log("Alert should pop up");

              <CustomAlert
                modalVisible={modalVisible}
                setModalVisible={setModalVisible}
                title={'Message'}
                message={'Please enable your Touch ID/PIN to your device'}
                buttons={[{
                  text: 'Ok',
                  func: () => { console.log('Yes Pressed') }
                }]}
              />

            }
          }
          }
        />
    </View>

Answer 1

您可以尝试将 <CustomAlert> 移到 <GoogleSignInButton> 之外，然后根据您的 modalVisible 状态变量有条件地显示 <CustomAlert>：

import CustomAlert from '../components/CustomAlert';
const [modalVisible, setModalVisible] = useState(false);

<View style={{ marginTop: `30%`, alignItems: 'center' }}>
    <GoogleSigninButton
      style={{ width: 252, height: 58 }}
      size={GoogleSigninButton.Size.Wide}
      color={GoogleSigninButton.Color.Dark}
      onPress={() => {
        if (fingerprint === true) {
          googleLogin();
        }
        else {
          console.log("Alert should pop up");
          setModalVisible(true);
        }
      }
      }
    />
    <CustomAlert
        modalVisible={modalVisible}
        setModalVisible={setModalVisible}
        title={'Message'}
        message={'Please enable your Touch ID/PIN to your device'}
        buttons={[{
          text: 'Ok',
          func: () => { console.log('Yes Pressed') }
        }]}
    />
</View>

请注意，在 else 分支中我们调用 setModalVisible(true)，这会将 modalVisible 设置为 true。然后 modalVisible 作为道具传递给 <CustomAlert>，它应该告诉模态渲染（假设它设置正确）。

React Native CustomAlert 在 onPress 中不起作用

React Native CustomAlert does not work inside onPress

javascript

reactjs

react-native

mobile-application