AWS在react-native中放大身份验证自定义UI

问题描述

所以我刚开始使用aws放大身份验证在React-native中工作。我创建了一个自定义登录屏幕，现在运行时看到一个空白应用程序。找不到错误。我认为hideDefault出于某种原因隐藏了所有内容，但我不知道如何解决它。

这是我的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 from 'react';
import {Text,TouchableOpacity,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,backgroundColor: '#ff77aa',alignItems: 'center',buttondisabled: {
    padding: 16,borderColor: '#ff77aa80',backgroundColor: '#ff77aa80',buttonText: {
    fontSize: 1,color: '#fff',}

});

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）