禁用React-Native文本输入框的选项

Question

我正在为一个项目使用TextInput，并希望禁用任何文本选择或操作，如下图所示(包括剪切/复制/粘贴/分享)。

我在React Native官方文档中没有找到相关内容。

- firebolt_ash

---

使用readonly属性？ - mehulmpt

如果您想禁用所有操作，如剪切、粘贴、复制，请使用caretHidden={true}。它还将隐藏您的光标。 - Anil Chahal

Answer 1

您应该添加2个属性selectTextOnFocus和editable

例如：

<TextInput editable={false} selectTextOnFocus={false} />

- Artem Tutov

---

不可编辑 - 我现在甚至无法编辑文本输入 - 当我可以编辑但无法在此文本输入中复制/剪切/粘贴时，我需要这些。 - firebolt_ash

当我将editable设置为false时，如何使用TextInput。我想禁用复制/粘贴选项，而不需要给出editable={false}。 - saiRam89

Answer 2

contextMenuHidden 用于禁止用户将文本粘贴到特定字段中并隐藏内容菜单。

更新： 这项功能尚未包含在发布版本中。您可以通过点击链接查看任何提交所在的版本。因此，我不希望看到它被稳定发布，直到0.55版。

<TextInput contextMenuHidden={true} />

在这里检查提交: 为TextInput添加隐藏上下文菜单的选项

- Balasubramanian

---

我正在使用react-native v0.54.0，但是我无法让它与这个工作。 - Mateo Guzmán

@MateoGuzmán 已更新答案。 - Balasubramanian

看起来它被放在了55.4，但在Android上无法工作。还有其他人能够让它在两个平台上都工作吗？ - Turnipdabeets

这种方法在安卓上不起作用。你有没有找到任何解决方案来防止安卓中的复制/粘贴选项？ - M.Kalidass

Answer 3

只需将您的文本输入框添加属性 editable={false} 即可。

- funkysoul

Answer 4

将TextInput的父级View的pointerEvents设置为none以禁用触摸事件，可以参考以下示例：

<View pointerEvents="none">
  <TextInput ... />
</View>

- Shine

---

这是一个边缘仅链接答案。您应该扩展您的答案，包括尽可能多的信息，并仅将链接用于参考。 - Filnor

pointerEvent不是解决这种情况的更好方法，应该添加caretHidden={true}。 - Pir Shukarullah Shah

如果您已经将光标放置在textInput框内，则此解决方案将无法正常工作。 - sudonitin

Answer 5

您可以使用一个View，并使用removeClippedSubviews={true}（适用于Android），并使用contextMenuHidden={true}（适用于IOS）

<View removeClippedSubviews={true}> <TextInput contextMenuHidden={true} /> </View>

- linhadiretalipe

Answer 6

参考以下问题 https://github.com/facebook/react-native/issues/33697

const App = () => {
  const [selection, setSelection] = useState(null);
  const [text, setText] = useState('');

  return (
    <TextInput 
      selection={selection}
      onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
      value={text}
      onChangeText={(text) => setText(text)}
      style={{ alignSelf: 'center', width: 200, marginTop: 50, backgroundColor: 'grey' }} 
    />
  );
};

- Marshal Truman

Answer 7

以下解决方案对我有效，可以避免复制粘贴。我在 onTouchEnd 事件中清除键盘。

const [text1, setText1] = useState('')
    
const clearClipboard = () =>{
 Clipboard.setString('')
}
    
const onChangeText = (text) =>{
 //For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
 if(text1.length+1 >= text.length){
  setText1(text)
 }
}
    
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>

- Vinay Revankar

Answer 8

如果您想禁用所有操作（如剪切、复制和粘贴），请使用 caretHidden={true}。它也将隐藏您的光标。

- Anil Chahal

---

如果你选择了一些文本，检查Android所有操作，仍然会像平常一样显示。 - rgripper

如何在不隐藏光标的情况下完成这个任务？ - Mateo Guzmán

Answer 9

这个技巧对我很有用。在这里，我使用了NativeBase。将<TextInput>放在<Item>标签中。现在选择属性不应该起作用。

以下是代码示例。

<Item>
<Input
  value={this.props.call_state.destination}
  onChangeText={text => this.props.setDestination(text)}
  returnKeyType={"done"}
  keyboardType={"numeric"}
/>
</Item>

您应该先安装NativeBase，然后在组件中从NativeBase导入{Item}

- Pallab Naskar

---

这可能是由于nativebase中的一个错误，因为默认情况下应该能够选择/复制/粘贴文本输入。 - Zoltán Hajdú