如何在 React Native 中使用 textContentType 获取 iOS 的电子邮件自动完成建议？

Question

RN 0.57.x 公开了 iOS 的

textContentType

，因此我应该能够让我们的应用程序在 TextInput 中建议用户的电子邮件。这使得初始体验更加顺畅，因为用户无需输入电子邮件地址来创建帐户。

但是，将

textContentType

设置为“emailAddress”并将

keyboardType

设置为“email-address”没有效果。

如何获取输入控件中建议的用户个人电子邮件地址？

Answer 1

对于 iOS，除了将

textContentType 

属性添加到

<TextInput>

RN 组件之外，您还需要：

• 在您的 Xcode 项目上添加

  Associated Domains

  权利
• 在您的网站上添加 Apple App Site Association 文件 (

  apple-app-site-association

  )

请参阅此博文：

• https://brainsandbeards.com/blog/quick-change-that-helps-ios-users-sign-in-quicker/

和苹果文档：

• https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_linked_domains

Answer 2

我是用以下方法做到的

• 在电子邮件字段中添加自动更正 true 并为 iOS 留出边距

• 仅在电子邮件和密码之间添加额外的虚拟文本输入
  iOS 平台，父 View 指针无包装
  回避焦点

  <TextInput
           autoCompleteType="email"
           autoCorrect={true}
           clearTextOnFocus={false}
           containerStyle={{marginTop: 5, marginBottom: isIos() ? -20 : 0}}
           keyboard="email-address"
           textContentType="emailAddress"
           value={username}
           onChangeText={(value): void => onInputChange('username', value)}
         />
  
         {isIos() ? (
           <View pointerEvents="none">
             <TextInput
               focusable={false}
               style={{color: '#00000000'}}
               onChangeText={(value): void => onInputChange('username', value)}
             />
           </View>
         ) : null}
  
         <TextInput
           autoCorrect={false}
           clearTextOnFocus={false}
           containerStyle={{marginTop: 5}}
           keyboard={isIos() ? 'ascii-capable' : 'default'}
           secureTextEntry={true}
           value={password}
           onChangeText={(value): void => onInputChange('password', value)}
         />