ReactNative textcontenttype iOS 13 问题答案

【问题标题】：ReactNative textcontenttype iOS 13 IssueReactNative textcontenttype iOS 13 问题
【发布时间】：2020-01-23 21:23:19
【问题描述】：

我们无法让电子邮件、姓名、电话号码建议（自动完成）在我们的 React Native 上工作。有人可以帮助解决问题，看看我们在这里可能做错了什么吗？

https://facebook.github.io/react-native/docs/textinput#textcontenttype

<Input
               placeholder="First Name"
               textContentType="givenName"
               onChangeText={firstname => (onChange('first_name', firstname))}
               value={state.form.first_name}
               autoCapitalize="words"
               placeholderTextColor={'#262626'}
               style={styles.textInput}
             />

【问题讨论】：

你在手机上测试你的输入吗？
是的，我正在 iOS 12 和 iOS 13 上进行测试。适用于 iOS 12 但不适用于 13。
这似乎是iOS13的普遍问题。它与 ReactNative 没有任何关系。
@JoachimDeelen，我在我开发的应用程序中看到了这个问题，但是我很难证明除了with the beta 之外的其他人也遇到了这个问题。你有更多关于发生了什么的证据吗？
是的，@Chirag 这是与 iOS 13 或 + 相关的问题。不特定于任何 react-native 版本。在 iOS 12 或更低版本的设备中尝试相同的代码会正常工作。此外，苹果在其文档中指定此 iOS 更新与隐私和安全问题有关。许多开发人员正在向苹果论坛创建问题。它将在下一次更新中很快得到修复。即使它在注册时已停止在 snapchat 自动归档中工作。直到等待，因为似乎没有解决方法。

标签： react-native autofill ios13

【解决方案1】：

它确实适用于 iOS 13。只需使用此处描述的设置，并将它们从 Swift 转换为 React Native：

After updating to iOS 13 suggestion(email, phone number, first name...) for UITextField don't appear above keyboard

电话号码：

autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"

对于电子邮件：

autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"

您需要为 Android 使用不同的键盘类型，因此可能类似于：

keyboardType={(Platform.OS === 'ios') ? "numbers-and-punctuation" : 'phone-pad"}

【讨论】：

我尝试了 textContentType 和 keyboardType 的不同组合以使一切正常。例如 textContentType="streetAddressLine1" 需要 keyboardType="name-phone-pad" 才能工作。

【解决方案2】：

在Android中我们可以使用autoCompleteType prop和支持的类型有它：

所以如果我在 android 中谈论电话号码建议，我们可以使用

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    autoCompleteType={"tel"}
/>

在 iOS 中，我们可以使用 textContentType 属性和支持的类型它是：

我们可以使用 iOS 中的电话号码建议

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    textContentType={"telephoneNumber"}
/>

无需创建两个不同的 TextInput ，只需使用下面的示例来支持 react native 中的 suggestions 到 telephone 字段。

<TextInput
    autoCorrect={true}
    keyboardType={'phone-pad'}
    autoCompleteType={"tel"}
    textContentType={"telephoneNumber"}
/>

【讨论】：

【解决方案3】：

在 react native 中你可以这样完成

 <TextInput
  ...
  textContentType='emailAddress'
  keyboardType='email-address' // a bit of extra love for your users
  autoCapitalize='none' // React Native default is to capitalise
/>

【讨论】：