Amazon web services Aws在react native中放大身份验证自定义UI

所以我刚开始在react native中使用aws amplify身份验证。我创建了一个自定义登录屏幕，现在我在运行时看到一个空白的应用程序。没有发现错误。我认为HiddeFault出于某种原因隐藏了一切，但我不知道如何修复它

这是我的App.js文件

import React, { useEffect, useState } from 'react'
import {View, Text, StyleSheet, TextInput, Button} from 'react-native'
import {AuthPiece, Authenticator } from 'aws-amplify-react-native'
import CustomSignIn from './customSignin'
import config from './aws-exports'
import Amplify from 'aws-amplify'

Amplify.configure({
  ...config,
  Analytics: {disabled: true}
})

class App extends AuthPiece{
  constructor(props) {
    super(props);
    this._validAuthStates = ['signedIn'];
  }
  showComponent(theme) {
    return(
      <View style={styles.container}>
        <Text>Blah Blah Blah</Text>
      </View>
    );
  }
}

export default function Authapp(){
  return(
    <Authenticator hideDefault={true}>
      <App/>
      <CustomSignIn/>
    </Authenticator>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
  }

});

import React，{useffect，useState}来自“React”
从“react native”导入{视图、文本、样式表、文本输入、按钮}
从“aws amplify react native”导入{AuthPiece，Authenticator}
从“./CustomSignIn”导入CustomSignIn
从“/aws导出”导入配置
从“aws放大”导入放大
放大({
…配置，
分析：{disabled:true}
})
类应用程序扩展了AuthPiece{
建造师（道具）{
超级（道具）；
这个._validAuthStates=['signedIn']；
}
showComponent（主题）{
返回(
废话连篇
);
}
}
导出默认函数Authapp（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“拉伸”，
justifyContent:“flex start”，
}
});

这是我的自定义登录

import React from 'react';
import {Text, TouchableOpacity, StyleSheet,TextInput,Image,View} from 'react-native';
import Amplify, {Auth, I18n, Logger} from 'aws-amplify'
import {Wrapper, SignIn} from 'aws-amplify-react-native'

export default class CustomSignIn extends SignIn{
  constructor(props) {
    super(props);
    this._validAuthStates = ['signedIn','signedOut','signedUp'];
    this.handleSignIn = this.handleSignIn.bind(this);
    this.usernameRef = React.createRef();
    this.passwordRef = React.createRef();
  }
  handleSignIn() {
    this.signIn();
    this.setState({username:null});
    this.setState({password:null});
    this.usernameRef.current.clear();
    this.passwordRef.current.clear();
  }
  showComponent(theme) {
    const { hide } = this.props;
       if (hide && hide.includes(CustomSignIn)) { return null; }
    return(
      <Wrapper>
        <View style={theme.section}>
          <View style={theme.sectionBody}>
            <TextInput
              style={styles.input}
              autoCapitalize='none'
              ref={this.usernameRef}
              onChangeText={text => this.setState({username:text})}
              placeholder={I18n.get('Phone Number')}
            />
            <TextInput
              style={styles.input}
              autoCapitalize='none'
              ref={this.passwordRef}
              onChangeText={text => this.setState({password:text})}
              placeholder={I18n.get('Password')}
              secureTextEntry
            />
            <TouchableOpacity
              style={!!(!this.state.username || !this.state.password) ? styles.buttonDisabled : styles.button}
              disabled={!!(!this.state.username || !this.state.password)}
              onPress={this.handleSignIn}>
              <text style={styles.buttonText}>SIGN IN</text>
            </TouchableOpacity>
              <View>
                <Text style={{color:'red'}}>{this.state.error}</Text>
              </View>
          </View>
        </View>
      </Wrapper>

    );
  }
}

const styles = StyleSheet.create({
  input: {
    fontSize: 16,
    padding: 16,
    borderWidth: 1,
    borderRadius: 32,
    borderColor: '#ff77aa',
    color: '#ff77aa',
    marginHorizontal: 64,
    marginVertical: 8,
  },
  button: {
    padding: 16,
    borderWidth: 1,
    borderRadius: 32,
    borderColor: '#ff77aa',
    backgroundColor: '#ff77aa',
    marginHorizontal: 64,
    marginVertical: 8,
    alignItems: 'center',
  },
  buttonDisabled: {
    padding: 16,
    borderWidth: 1,
    borderRadius: 32,
    borderColor: '#ff77aa80',
    backgroundColor: '#ff77aa80',
    marginHorizontal: 64,
    marginVertical: 8,
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 1,
    color: '#fff',
  }

});

从“React”导入React；
从“react native”导入{Text，TouchableOpacity，样式表，TextInput，图像，视图}；
从“aws放大”导入放大，{Auth，I18n，Logger}
从“aws amplify react native”导入{Wrapper，SignIn}
导出默认类CustomSignIn扩展SignIn{
建造师（道具）{
超级（道具）；
这个._validAuthStates=['signedIn'，'signedOut'，'signedUp']；
this.handleSignIn=this.handleSignIn.bind（this）；
this.usernameRef=React.createRef（）；
this.passwordRef=React.createRef（）；
}
handleSignIn（）{
这个；
this.setState（{username:null}）；
this.setState（{password:null}）；
this.usernameRef.current.clear（）；
this.passwordRef.current.clear（）；
}
showComponent（主题）{
const{hide}=this.props；
if（hide&&hide.includes（CustomSignIn））{return null；}
返回(
this.setState（{username:text}）
占位符={I18n.get（'Phone Number'）}
/>
this.setState（{password:text}）}
占位符={I18n.get（'Password'）}
secureTextEntry
/>
登录
{this.state.error}
);
}
}
const styles=StyleSheet.create({
输入：{
尺寸：16，
填充：16，
边框宽度：1，
边界半径：32，
边框颜色：“#ff77aa”，
颜色：“#ff77aa”，
marginHorizontal:64，
Margin:8，
},
按钮：{
填充：16，
边框宽度：1，
边界半径：32，
边框颜色：“#ff77aa”，
背景颜色：“#ff77aa”，
marginHorizontal:64，
Margin:8，
对齐项目：“居中”，
},
按钮禁用：{
填充：16，
边框宽度：1，
边界半径：32，
边框颜色：'#ff77aa80'，
背景颜色：“#ff77aa80”，
marginHorizontal:64，
Margin:8，
对齐项目：“居中”，
},
按钮文字：{
字体大小：1，
颜色：“#fff”，
}
});

非常感谢您的帮助，谢谢