React Native 中的隐藏文本输入答案

【问题标题】：Hidden TextInput in React NativeReact Native 中的隐藏文本输入
【发布时间】：2022-01-01 19:25:49
【问题描述】：

我正在处理一个连接到扫描仪的项目。扫描仪在扫描时将发送文本。现在我有一个文本输入（隐藏）字段来从扫描仪获取详细信息，但我面临的问题是当文本输入获得焦点时键盘正在显示。我曾尝试使用 Keyboard.dismiss() 但这也会从 TextInput 中移除焦点（现在 TextInput 不再监听从 Scanner 返回的文本）。我该如何解决这个问题？

下面是代码

 <TextInput
            style={Style.hiddenInput}
            autoFocus={true}
            multiline
            onFocus={Keyboard.dismiss}
            onChangeText={this._onHiddenTextChangeText}
            value={this.state.hiddenInput}
          />

样式

 hiddenInput: {
    width: 0,
    height: 0,
  },

【问题讨论】：

“隐藏”文本输入是什么意思？它实际上没有显示？它被禁用了吗？为什么需要集中注意力？
当您的扫描仪返回时，您可以使用 setState 更新文本
你的意思是要复制TextInput中的文字吗？
认为扫描仪是一种输入设备（如键盘）。无论您在键盘上输入什么，只有当它是 TextInput（或任何可以理解输入的控件）时才会被写入。这就是我想设置焦点的原因。为什么我希望它成为一个隐藏字段，因为我不希望向用户显示 TextInput（来自扫描仪的文本）

标签： react-native

【解决方案1】：

我通过添加原生包解决了这个问题。我在下面的 github 链接中添加了示例

https://github.com/mohanprasathsj/reactnative-hidekeyboardonfocusexample

【讨论】：

iOS 怎么样？

【解决方案2】：

我能想到的最佳方法是将扫描的值复制到Clipboard（可能使用扫描仪设置）并不断检查来自Clipboard的数据。

componentDidMount() {
  this.getReadyToScan();
}

getReadyToScan() {
  try {
    let content = await Clipboard.getString();

    // Do whatever you want

    Clipboard.setString('');
  } catch (e) {
    Clipboard.setString('');
  } finally {
    // Adding a little bit of sleep
    setTimeout(() => this.getReadyToScan(), 200);
  }
}

有人要求将keyboard='none' 添加到 React-Native 的 TextInput，但他们还没有解决它。

【讨论】：

【解决方案3】：

<View style={{width:0,height:0}}>
<TextInput
            style={Style.hiddenInput}
            autoFocus={true}
            multiline
            onFocus={Keyboard.dismiss}
            onChangeText={this._onHiddenTextChangeText}
            value={this.state.hiddenInput}
          />
</View>

【讨论】：

在您的答案中添加更多细节，因为只有代码不会帮助 OP 或其他在此主题中寻求帮助的用户。