React Native-无法渲染作为prop传递的函数中返回的组件

Question

我有一个功能：

handleSignUp= () => {
    if(this.state.password === this.state.confirmedPass) {
        firebase.auth().createUserWithEmailAndPassword(this.state.email, 
        this.state.password).catch((error) => {
            let errorCode = error.code;
            let errorMessage = error.message;
            if (errorCode == 'auth/email-already-in-use') {
                return <Custom Component/>
            }
            else if (errorCode == 'auth/invalid-email') {
                alert('invalid email');
                return <Custom Component/>
            }
            else if (errorCode == 'auth/weak-password') {
                return <Custom Component/>
            }
            else {
                // ... Some action is executed
            }
        });
    }

在我的渲染功能中，我有一个：

render() {
    return (
        <View>
            <Btn action={this.handleSignUp}/>
            // Btn is a component with prop 'action' which is a function passed to onPress in the Btn definition
        </View>
    )
}

但是handleSignUp中返回的自定义组件不会呈现。请帮忙。我是新来的人，可能有一个简单的解决方案，但是我在Google上进行了广泛搜索，找不到任何解决方案。

Btn班

import React from 'react';

import {
  View,
  Text,
  TouchableNativeFeedback,
  TouchableOpacity,
  StyleSheet
} from 'react-native';


export default class Btn extends React.Component {
  render() {
    const btnStyle = this.props.btnStyle;
    return(
      <TouchableNativeFeedback onPress={this.props.action} background= 
      {TouchableNativeFeedback.Ripple('#60b0f4',false)}>
          <View style={btnStyle}>
            <Text style={this.props.textStyle}>{this.props.text}</Text>
          </View>
      </TouchableNativeFeedback>
    );
  }
}