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

Question

如何使用Authenticator UI自定义默认AWS？ 我想隐藏或删除keyboardAvoidingView字段并添加自定义颜色和填充。还想使用React Native的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); 将整个表单移动到屏幕底部。

使用AWS放大器设置身份验证速度非常快，但在定制注册和登录体验方式方面似乎具有挑战性。

<a href="../falzmaschinen_produktion.htm">FALZMASCHINEN Docufold</a>

正如您所看到的，设置起来非常快，但除非您可以为其添加自定义样式，否则默认UI不可用。

Answer 1

您在这里有两个问题： 1.验证\注册需要哪些字段？

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

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

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

1. 如何自定义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，该链接也在该文档链接中进行了讨论。

Answer 2

添加

@import '../src/theme/variables.scss';

末尾

  

src / global.scss