如何在React Native上获取TextInput组件中动态引用和焦点

在React Native中，要获取TextInput组件中的动态引用和焦点，可以通过使用useRef钩子来实现。

首先，需要在函数组件中引入useRef钩子：

import React, { useRef } from 'react';

然后，在组件中创建一个ref对象：

const textInputRef = useRef(null);

接下来，将该ref对象绑定到TextInput组件的ref属性上：

<TextInput ref={textInputRef} />

现在，你可以通过textInputRef.current来访问TextInput组件的属性和方法。例如，要获取TextInput中的文本值，可以使用textInputRef.current.value。

要获取焦点，可以使用textInputRef.current.focus()方法。

下面是一个完整的示例：

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

const MyComponent = () => {
  const textInputRef = useRef(null);

  const handleButtonClick = () => {
    const textValue = textInputRef.current.value;
    console.log(textValue);
  };

  return (
    <View>
      <TextInput ref={textInputRef} />
      <Button title="Get Text" onPress={handleButtonClick} />
    </View>
  );
};

export default MyComponent;

在上面的示例中，我们创建了一个TextInput组件和一个按钮。当按钮被点击时，我们通过textInputRef.current.value获取TextInput中的文本值，并将其打印到控制台上。

这是一个简单的示例，你可以根据实际需求进行扩展和修改。

腾讯云相关产品和产品介绍链接地址：