使用 useRef 在 React Native 中获取元素的子元素

Question

我想了解如何在 React Native 中使用 useRef 并获取 View 元素的子元素，但我无法实现它。

我正在尝试使用 TextInput 组件中的 .focus 方法来按下 TouchableOpacity

声明：

const input = useRef(null);

文本输入组件：

<View ref={input}>
  <Tex>Email</Text>
  <TextInput placeholder=""/>
</View>

元素：

 <TouchableOpacity onPress={() => {}}>
    <TextInputComponent />
 </TouchableOpacity>

我试过 input.current.children，但是 returns undefined。

Answer 1

这是一个工作示例，说明如何在 TypeScript 的基本 expo init 项目上使用你想要的东西：

App.tsx

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, TextInput, TouchableOpacity} from "react-native";
import { useRef, forwardRef} from "react";

const TextInputComponent = forwardRef<TextInput>((props, ref) => {
  return (
    <View>
      <Text>Email</Text>
      <TextInput ref={ref} placeholder="Some placeholder" />
    </View>
  );
});

export default function App() {
  const input = useRef<TextInput>(null)

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
      <TouchableOpacity onPress={() => {
input.current?.focus();
      }}>
        <TextInputComponent ref={input} />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

在这种情况下，使用 forwardRef 更实用，这样您就不必遍历 View 组件的子组件来传递来自组件的 ref (App 在这种情况下）正在使用 TextInputComponent.

使用 useRef 在 React Native 中获取元素的子元素

Get the childrens of an element in react native using useRef

react-native

expo

use-ref