使用 editable=true 和 dataDetectorTypes 反应原生 TextInput

Posted 2023-04-18

【中文标题】使用 editable=true 和 dataDetectorTypes 反应原生 TextInput

【英文标题】：React Native TextInput with editable=true and dataDetectorTypes

【发布时间】：2020-08-10 05:41:35

【问题描述】：

我正在尝试创建一个既可编辑又具有可点击 url 的 TextInput 组件。根据 react native docs，只有在 editable=false 时才支持 dataDetectorTypes 属性。

Determines the types of data converted to clickable URLs in the text input. Only valid if multiline=true and editable=false.

有没有人找到解决这个限制的方法？似乎应该是可能的。我想要的行为是……

点击 url 应该在浏览器中打开它 点击其他任何位置应在该位置开始编辑 TextInput当前有焦点时，如果链接不再可点击也没关系

【问题讨论】：

只需将链接放在 TextInput 下方

【参考方案1】：

我能想到的唯一解决方法是将editable 值存储在状态中，然后单击某些Edit 按钮会将状态从editable 更改为true。

onBlur 会将此状态切换回false

虽然我之前没有尝试过，所以只是建议尝试解决方法或在两者之间找到一些中间立场。

【参考方案2】：

我的建议是将输入字段的 url 放在一个更大的 div 中。

使输入字段中的文本不要太大，当您单击它时会触发一些功能，该功能会重定向到您所在州的页面。 当您单击外部 div 时，您会触发一个函数来关注输入字段并编辑其值。