ReactNativeでJSXのタグの中を取得したい

Question

React Nativeで、関数からJSXのタグの中身を取得したいのですが、方法はあるでしょうか？
実際に行いたい動作を例として下に作りました。よろしくお願いします。

export default function App() {

  const onPressApple = () => {
    // タグの中身を取得してコンソールに"りんご"が表示されるようにしたい
  }

  return(
    <View>
      <Text onPress={onPressApple}>りんご</Text>
      <Text>すいか</Text>
    </View>
  )
}

Comments

[hoshi-takanori]

考え方の方向性が逆というか、表示されているものを取得するのではなく、表示したいものをあらかじめ変数 (とか props とか state とか) に入れて、それを表示するという方向で考えましょう。

Answer 1

refを使って要素を掘っていけば取得することはできますが、他の方がコメントされているように違う発想で進めた方が無難かなという気もします。

export default function App() {
  const ref = useRef(null);

  const onPress = useCallback(() => {
    console.log(ref?.current?._internalFiberInstanceHandleDEV?.pendingProps?.children);
  }, [ref]);

  return (
    <View>
      <TouchableOpacity onPress={onPress}>
        <Text>JSXの中身を取得</Text>
      </TouchableOpacity>
      <Text ref={ref}>りんご</Text>
    </View>
  );
}