Question

在aws-amplify中使用自定义登录表单会导致所有按钮不响应点击。状态不会更改为Signedup或其他“忘记密码”

我正在为aws-amplify自定义登录表单。当我启动我的应用程序时，将出现自定义的登录表单，但是所有按钮均不响应单击。单击“注册”或“忘记密码”时，状态也不会更改。我关注以下有关如何执行此操作的文章：

https://blog.kylegalbraith.com/2018/11/29/how-to-easily-customize-the-aws-amplify-authentication-ui/

https://aws-amplify.github.io/docs/js/authentication#customize-withauthenticator

下面是我的代码段：

import React, { Component } from 'react';
import .. from 'react-native';

import {SignIn} from 'aws-amplify-react-native';

export default class SignInScreen extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }
  showComponent(theme) {
    return (
    ...
        <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}
                            onClick={() => {super.signIn(); Alert.alert('Alert',"I clicked login")}}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.buttonContainer} onClick={() => super.changeState("forgotPassword")}>
            <Text style={styles.signupText}>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.buttonContainer} onClick={() => super.changeState("signUp")}>
            <Text style={styles.signupText}>Sign up</Text>
        </TouchableHighlight>
      </View>
      </ScrollView>
      </SafeAreaView>
    );
  }
}

下面是如何在App.js中为我的应用启用Auth：

export default withAuthenticator(App, false, [
    <SignInScreen/>,
    <ConfirmSignIn/>,
    <VerifyContact/>,
    <SignUp/>,
    <ConfirmSignUp/>,
    <ForgotPassword/>,
    <RequireNewPassword />
])

自定义登录窗体可以正确呈现。我可以输入我的用户名和密码，但是单击任何按钮都不会执行任何操作。

任何提示，建议为何会发生这种情况？

谢谢。

Answer 1

我想出了答案。对于可能会看到此问题的任何人，对于TouchableHighlight：使用onPress而不是onClick。尽管react-native不会抱怨，但它不起作用。

代替

<TouchableHighlight style={styles.buttonContainer} onClick={() => super.changeState("signUp")}>
            <Text style={styles.signupText}>Sign up</Text>
        </TouchableHighlight>

执行以下操作：

<TouchableHighlight style={styles.buttonContainer} onPress={() => super.changeState("signUp")}>
            <Text style={styles.signupText}>Sign up</Text>
        </TouchableHighlight>

自定义登录表单按钮无响应

1 个答案: