反应原生，如何将剪贴板中的文本粘贴到文本输入中答案

【问题标题】：react native, how to paste text from clipboard into text input反应原生，如何将剪贴板中的文本粘贴到文本输入中
【发布时间】：2022-02-05 12:04:35
【问题描述】：

目前我正在使用本机基础并为搜索栏输入这种类型的文本

<Text>
   Card Name
</Text>
<Header searchBar rounded style={{ backgroundColor: '#E9E9EF'}}> 
   <Item style={{ backgroundColor: 'lightgray', borderRadius: 5 }}>
      <Icon name="ios-search" />
      <Input placeholder="Search" onChangeText={(searchText) => this.setState({searchText})} value={this.state.searchText} />
   </Item>
</Header>

我想启用从剪贴板粘贴，用户可以从其他地方复制一些文本并将其粘贴到此搜索输入框中。我该怎么做？

【问题讨论】：

我在这篇文章中回答了，请找到我希望它会有所帮助。 stackoverflow.com/questions/50655600/…
我在这篇文章中回答了，希望对您有所帮助。 stackoverflow.com/questions/50655600/…
我在这篇文章中回答了，希望对您有所帮助。 stackoverflow.com/questions/50655600/…

标签： javascript react-native

【解决方案1】：

您可以使用剪贴板 API：https://facebook.github.io/react-native/docs/clipboard 或 Textinput 属性：selectTextOnFocus

<TextInput selectTextOnFocus={true} />

【讨论】：

boolean jsx prop 可以这样selectTextOnFocus

【解决方案2】：

如果在 React Native 中复制/粘贴不适用于 TextInput。您可以按照此代码进行操作。

import React, { Component } from 'react';
    import { TextInput, View } from 'react-native';

    export class App extends Component {
      constructor(props) {
        super(props);
        this.state = { text: '', testWidth: '99%' };
      }
      componentDidMount() {

        setTimeout(() => {
          this.setState({ textboxWidth: '100%' })
        }, 100)
      }
      render() {
        return (
          <View style={{ marginTop: 40 }}>
            <TextInput
              style={{ width: this.state.textboxWidth }}
              placeholder="Please type"
              onChangeText={(text) => this.setState({ text })}
              value={this.state.text}
            />
          </View>
        );
      }
    }

【讨论】：

【解决方案3】：

在这个 Git 回复中找到的解决方案对我来说效果更好：https://github.com/facebook/react-native/issues/18926#issuecomment-490541013

 <ScrollView
contentContainerStyle={Styles.contentContainerStyle}
keyboardShouldPersistTaps="handled"
removeClippedSubviews={false}>

 <KeyboardAvoidingView>

      <Text style={Styles.labelPageTitle}>
        {'bla bla bla'}
      </Text>
      <Text>
          {'bla bla bla'}
      </Text>
      <TextInput
        onChangeText={text => this.setState({ title: text })}
        style={Styles.textInput}
        value={title}
      />

</KeyboardAvoidingView>

【讨论】：

【解决方案4】：

用户 RN 手势处理程序的 TextInput 而不是 react native 的从 'react-native-gesture-handler' 导入 {TextInput}；

添加以下内容 selectTextOnFocus={真} 到 TexInput

【讨论】：

【解决方案5】：

这是 TextInput 中的参数secureTextEntry={true} 有效

【讨论】：

secureTextEntry 屏蔽输入。这不是操作问题的答案