首页 文章

是否可以自定义aws-amplify-react-native软件包的默认注册，登录屏幕？

提问于
浏览 次
1

为了拥有默认的身份验证屏幕，我只能这样做（https://github.com/aws-samples/aws-mobile-react-native-starter）：

import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);

而且我得到了非常丑陋的默认开箱即用登录屏幕：

然后docs说我无法修改默认值，我必须创建自己的（https://github.com/aws-samples/aws-mobile-react-native-starter）：

您可以使用此高阶组件，也可以构建自己的UI并使用Amplify的API .

但他们也说，我可以自定义默认登录屏幕（https://github.com/aws/aws-amplify/blob/master/README.md）：

AWS Amplify将为用户注册和登录等常见用例提供可自定义的UI .

问题是，我们可以自定义默认屏幕吗？如果我们想要一些花哨的东西，我们必须创建自己的屏幕？

authentication react-native amazon-cognito aws-amplify

3 回答

  • 2

    根据the docs，您应该能够将您的应用程序包装在HOC（ Authenticator ）中，而不是使用 withAuthenticator .

    import { Authenticator } from 'aws-amplify-react';

export default class AppWithAuth extends Component {
 render(){
    return (
      <Authenticator>
        <App />
      </Authenticator>
    );
  }
}
    回复于
  • 1

    所有Amplify Authenticator组件都可以与aws-amplify-react-native分开导入 . 您可以 copy the source code 将repo（https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src）添加到您自己的项目 modify it 并从那里导入 . *如果你想获得其他框架的包 - React，Vue，Angular等，请访问这里https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native .

    目前，在我的项目中，我正在自定义 SignUp, SignIn and ConfigrmSignUp 组件，如下所示 . 这是创建自己的UI的建议方式，它与放大验证器无缝协作 .

    点击此处了解更多信息：https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui

    import {
  withAuthenticator,
  SignUp,
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  VerifyContact,
  Greetings,
  Loading,
  RequireNewPassword
} from 'aws-amplify-react-native';

import { 
  Authenticator, 
  ConfirmSignUpScreen, <----- customized authenticator component
  SignUpScreen, <----- customized authenticator component
  SignInScreen <----- customized authenticator component
} from './screens/auth';

export default withAuthenticator(App, false, [
  <Loading />
  <SignInScreen />  <----- customized authenticator component
  <ConfirmSignIn />  <----- customized authenticator component
  <VerifyContact />
  <SignUpScreen />  <----- customized authenticator component
  <ConfirmSignUpScreen />
  <ForgotPassword />
  <RequireNewPassword />
  <Greetings />
]);
    回复于
  • 0

    我有同样的问题，为aws-amplify定制signUp和SignIn组件，所以我创建了这个lib（aws-amplify-react-custom-ui） . 这是自定义signIn的示例：

    import SignIn from "./SignIn";
    import AmplifyCustomUi from "aws-amplify-react-custom-ui";
    AmplifyCustomUi.setSignIn(SignIn);

    更多信息：https://github.com/ysfmag/aws-amplify-react-custom-ui

    回复于

相关问题