React本地,如何粘贴文本从剪贴板到文本输入

bd1hkmkf  于 2023-01-18  发布在  React
关注(0)|答案(6)|浏览(207)

目前我正在使用本地基地和有这类型的文本输入为搜索栏

<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>

我想启用从剪贴板粘贴,用户可以从其他地方复制一些文本并粘贴到这个搜索输入框。我该怎么做?

bz4sfanl

bz4sfanl1#

您可以使用剪贴板API:https://facebook.github.io/react-native/docs/clipboard或文本输入属性:选择焦点文本

<TextInput selectTextOnFocus={true} />
jei2mxaa

jei2mxaa2#

如果复制/粘贴不适用于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>
        );
      }
    }
cs7cruho

cs7cruho3#

在这个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>
cmssoen2

cmssoen24#

用户RN手势处理程序的TextInput,而不是来自“react-native-gesture-handler”的react native的导入{TextInput};
请将以下selectTextOnFocus={true}添加到文本输入

iszxjhcz

iszxjhcz5#

你可以使用官方文档推荐的社区包
@react-native-剪贴板/剪贴板

import Clipboard from '@react-native-clipboard/clipboard'

您可以通过调用异步函数轻松地访问剪贴板文本

const text = await Clipboard.getString()
ffscu2ro

ffscu2ro6#

这是TextInput secureTextEntry={true}工作中的参数

相关问题