Javascript React Native CustomAlert 在 onPress 中不起作用

发布于04月19日

我正面临一个奇怪的问题.在我的react-native 应用程序中，我有customAlert个，它显示如果该语句为false，则当前只显示console.

    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>

推荐答案

您可以try 将<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作为props 传递给<CustomAlert>，这应该告诉模态渲染(假设设置正确).