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

Question

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

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

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

然后文档说我不能修改默认值，我必须创建自己的( https://github.com/aws-samples/aws-mobile-react-native-starter ):

You can either use this Higher Order Component, or build your own UI and use the APIs from Amplify too.

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

AWS Amplify will provide you customizable UI for common use cases such as user registration and login.

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

Answer 1

所有 Amplify Authenticator 组件都可以从 aws-amplify-react-native 单独导入。您可以将 源代码 repo ( https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src ) 复制到您自己的项目中， 修改它 并从那里导入。
* 如果您想获取其他框架的包 - 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 />  
  <VerifyContact />
  <SignUpScreen />  <----- customized authenticator component
  <ConfirmSignUpScreen />  <----- customized authenticator component
  <ForgotPassword />
  <RequireNewPassword />
  <Greetings />
]);