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

【问题标题】：React Native TextInput with editable=true and dataDetectorTypes使用 editable=true 和 dataDetectorTypes 反应原生 TextInput
【发布时间】：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 下方

标签： react-native textinput datadetectortypes

【解决方案1】：

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

onBlur 会将此状态切换回false

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

【讨论】：

【解决方案2】：

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

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

【讨论】：