是否可以自定义aws-amplify-react-native软件包的默认“注册”，“登录”屏幕？ [英] Is it possible to customize default Sign Up, Sign In screens of aws-amplify-react-native package?

问题描述

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

In order to have default auth screen, I can merely do this (https://github.com/aws-samples/aws-mobile-react-native-starter):

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

我得到了非常难看的默认开箱即用登录屏幕：

And I get pretty ugly default out-of-the-box login screen:

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

Then docs say I can't modify default, I have to create my own (https://github.com/aws-samples/aws-mobile-react-native-starter):

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

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 ）：

But also they thay say, that I can customize default login screens (https://github.com/aws/aws-amplify/blob/master/README.md):

AWS Amplify将为您提供用于用户注册和登录等常见用例的可定制UI。

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

问题是，我们可以自定义默认值吗？屏幕，否则我们必须创建自己的屏幕是否需要花哨的东西？

Question is, can we customize default screen or we must create our own screens if we want something fancy?

推荐答案

所有Amplify Authenticator组件都可以与aws-amplify-react-native分开导入。您可以复制源代码回购协议（ 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 。

All the Amplify Authenticator components can be imported separately from aws-amplify-react-native. You can copy the source code the repo (https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src) to your own project, modify it and import from there. * If you want to get the package for other framework - React, Vue, Angular, etc, visit here https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native.

当前，在我的项目中，我正在自定义 SignUp，SignIn和ConfigrmSignUp 组件，如下所示。这是创建您自己的UI的建议方法，并且可以与扩增验证器无缝地协同工作。

Currently, in my project, I am customizing SignUp, SignIn and ConfigrmSignUp components as shown below. This is the suggested way of creating your own UI and it works seamlessly with the amplify authenticator.

在此处查看更多信息：
https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui

Check out more here: 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 />
]);

这篇关于是否可以自定义aws-amplify-react-native软件包的默认“注册”，“登录”屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！