如何在 React Native 纸张 TextInput 上禁用自动完成功能？使用 autoComplete="off" 在网络上呈现 autocomplete="noop"

Question

我正在尝试使用 TextInput from react-native-paper 3.10.1

在网络上禁用 autocomplete

<TextInput
  name="city"
  textContentType="addressCity"
  autoComplete="off"
  mode="outlined"
/>

autoComplete="off" 在呈现的 HTML 中被替换为 autocomplete="noop"，这导致自动完成不会被禁用。

noop 是从哪里来的？如何禁用自动完成功能？

复制

https://snack.expo.io/@kopax/curious-pizza

Answer 1

您需要传递的道具是autoCompleteType='off'。您可以在此处找到有关 react-native 提供的 TextInput 组件的道具的更多信息（谁的道具 React Native Paper 的 TextInput 也扩展了）。 https://reactnative.dev/docs/textinput.html#autocompletetype

Answer 2

react-native-web API says it follows The HTML autocomplete attribute, but it doesn't work. It does however seem to follow aria-autocomplete 中的文本输入。

react-native 中的 TextInput 遵循它自己的 API. But there's this issue，将 react native 中的道具从 autoCompleteType 重命名为 autoComplete。所以在撰写本文时，React Native 文档也需要更新。

解决方法：

<TextInput
  autoComplete={ Platform.OS === 'web' ? 'none' : 'off' }

测试时间：

expo: 42.0.4
react-native: 0.63.2 (https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz)
react-native-web (version): 0.13.18
react: 16.13.1
Browser: Chrome 96.0.4664.110

如何在 React Native 纸张 TextInput 上禁用自动完成功能？使用 autoComplete="off" 在网络上呈现 autocomplete="noop"

How to disable autocomplete on react native paper TextInput? with autoComplete="off" render autocomplete="noop" on the web

javascript

reactjs

react-native

web

autocomplete

复制