react-native - 在 React Native 上使用 Authenticator UI 自定义 AWS 放大

Question

如何使用身份验证器 UI 自定义默认 AWS？
我想隐藏或删除 Phone Number归档并添加自定义颜色和填充。还想用 React Native 的 keyboardAvoidingView 将整个表单移到屏幕底部.

使用 AWS Amplify 设置身份验证非常快，但似乎很难自定义我想要的注册和登录体验方式。

import React from 'react';
import Root from './src/components/Root/Root';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

class App extends React.Component {
  render() {
    return <Root />;
  }
}

export default withAuthenticator(App);

如您所见，设置它的速度非常快，但除非您可以为其添加自定义样式，否则默认 UI 无法使用。

Answer 1

你有两个顾虑:
1. 认证\注册需要哪些字段？

为此，您需要更改用户池的设置。登录 AWS 控制台，转到 Cognito 和管理用户池。创建一个新池并指定您希望用户如何登录和启用/禁用 MFA。



我的猜测是大多数人都希望仅使用电子邮件并禁用 MFA。

之后，删除您的 Mobile Hub 登录设置中的用户池，并将此新用户池导入您的 Mobile Hub 应用程序的登录设置。

如何自定义 AWS Amplify 托管的身份验证 UI？

要自定义样式并保留屏幕，您可以将自己的主题应用到 <Authenticator>

import MyTheme from './MyTheme';
<Authenticator theme={MyTheme} />

您可以导入默认和覆盖部分

import { AmplifyTheme } from 'aws-amplify-react';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });

<Authenticator theme={MyTheme} />

所有这些以及更多内容都在 Docs for Customizing Amplify UI Theme 中.

另一种选择是构建您的身份验证屏幕并从您的自定义屏幕调用 Auth.SignIn\Up\Out 这也在该文档链接中进行了讨论。