在React Native中组成警报组件

Question

这是我编写代码的最初方式。我需要组成一个单独的组件来显示警报。我已经创建了Calert组件，并在检查功能中将其返回。但这在调用检查功能时不会显示任何警报。

这是我在警报中编写的检查功能。

checking = () => {
    Alert.alert(
      "Mark Attendance",
      this.state.isCheckin == false
        ? "Would you like to check in for today?"
        : "Would you like to check out for today?",
      [
        {
          text: "Cancel",
          onPress: () => this.setState({isCheckin: this.state.isCheckin}),
          style: "cancel"
        },
        {
          text: "OK",
          onPress: () => {
            RNAndroidLocationEnabler.promptForEnableLocationIfNeeded({
              interval: 10000,
              fastInterval: 5000
            })
              .then(data => {
                if (data == "already-enabled" || data == "enabled") {
                  this.getLocation("true");
                } else {
                  Alert.alert(
                    "Oop!",
                    "Location should be enabled. Do you want to enable location and continue?",
                    [
                      {
                        text: "Cancel",
                        onPress: () =>
                          this.setState({isCheckin: this.state.isCheckin}),
                        style: "cancel"
                      },
                      {
                        text: "OK",
                        onPress: () => {
                          this.getLocation("true");
                        }
                      }
                    ],
                    {
                      cancelable: false
                    }
                  );
                }
              })
              .catch(err => {
              });
          }
        }
      ],
      {
        cancelable: false
      }
    );

这是我对Calert组件的代码。

import * as React from 'react';
import { Alert } from 'react-native';


const Calert = ({title,subtitle, onPressOk, onPressCancel}) => (
    console.log(123),
    Alert.alert(
        title,
        subtitle,
        [
          {
            text: "Cancel",
            onPress: () => {onPressOk},
            style: "cancel"
          },
          {
            text: "OK",
            onPress: () => {
                onPressCancel
            }
        }
        ],
        {
                  cancelable: false
                }
      )
)

export default Calert;  

这就是我在检查功能中返回Calert组件的方式。

checking = () => {
   return (<Calert
      title="Mark Attendance"
      subtitle={
        this.state.isCheckin == false
          ? "Would you like to check in for today?"
          : "Would you like to check out for today?"
      }
      onPressOk={RNAndroidLocationEnabler.promptForEnableLocationIfNeeded({
        interval: 10000,
        fastInterval: 5000
      }).then(data => {
        if (data == "already-enabled" || data == "enabled") {
          this.getLocation("true");
        } else {
          <Calert
            title="Oop!"
            subtitle="Location should be enabled. Do you want to enable location and continue?"
            onPressOk={this.getLocation("true")}
            onPressCancel={this.setState({isCheckin: this.state.isCheckin})}
          />;
        }
      })}
      onPressCancel={this.setState({isCheckin: this.state.isCheckin})}
    />)
  };