react-native - 在 React Native 上使用身份验证器 UI 自定义 AWS 放大
问题描述
如何使用 Authenticator 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 不可用,除非您可以为其添加自定义样式。
解决方案
您在这里有两个问题: 1. Authenticate \ Sign Up 需要哪些字段?
为此,您需要更改用户池的设置。登录 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,这也在该文档链接中进行了讨论。
推荐阅读
- python - 带异常处理的动态导入
- python - 在二十一点游戏中更新奖金时遇到问题
- reactjs - 在 React 中为子元素添加键
- python - 如何在 PyMongo 中使用 updateOne() 而不添加重复项?
- nestjs - 在 Nestjs 中更改 dist 目录
- python - 如何从本地电脑加载多个 csv 文件
- macos - 从 Mac Dock 隐藏正在运行的应用程序而不影响应用程序的 UI(不使用 LSUIElement=TRUE)
- swift - 在 MariaDB 中保存 UUID 以用于 Vapor
- webpack - Nativescript如何强制webpack清除缓存的node_module?
- julia - 我什么时候应该使用可选生成的函数?