如何在React Native中实现类似React的树结构访问与元素操作？

Web React中的实现示例 #

在Web环境中，我们可以通过事件对象直接操作DOM节点，示例代码如下：

<div onClick={(event)=>{}} style={{height: 500}}>
    <div style={{height: 300}}>
        <button onClick={(event)=>{}} style={{color: 'blue'}}>Clickable</button>
    </div>
</div>

点击最外层div时可执行以下操作：

• event.currentTarget.children —— 获取所有直接子元素
• event.currentTarget.children[0].firstElementChild —— 获取按钮元素
• getComputedStyle(event.currentTarget).getPropertyValue('height') —— 获取div的计算高度

点击按钮时可执行以下操作：

• event.currentTarget.parentElement.parentElement —— 获取最外层div元素
• getComputedStyle(event.currentTarget).getPropertyValue('color') —— 获取按钮的计算颜色

React Native中的对应实现方案 #

React Native没有DOM树结构，无法直接通过事件对象访问节点层级或获取计算样式，需要通过以下方式实现类似功能：

1. 使用useRef获取组件节点/实例 #

通过useRef可以获取到React Native组件的底层视图节点，从而实现类似DOM节点的访问。

示例代码：

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

export default function App() {
  const outerPressableRef = useRef(null);
  const innerViewRef = useRef(null);
  const buttonRef = useRef(null);

  const handleOuterPress = () => {
    // 获取直接子节点
    console.log(innerViewRef.current);
    // 获取按钮节点
    console.log(buttonRef.current);
  };

  const handleButtonPress = () => {
    // 获取最外层Pressable节点
    console.log(outerPressableRef.current);
  };

  return (
    <Pressable ref={outerPressableRef} onPress={handleOuterPress} style={{height: 500}}>
      <View ref={innerViewRef} style={{height: 300}}>
        <Button ref={buttonRef} onPress={handleButtonPress} title="Clickable" color='blue' />
      </View>
    </Pressable>
  );
}

2. 获取计算后的样式 #

React Native没有getComputedStyle这类API，需通过以下方式获取样式信息：

• 静态样式：直接从定义的样式对象中读取，比如style.height
• 动态样式：将样式值存入组件状态，需要时直接从状态中读取
• 实际渲染尺寸：使用onLayout事件获取组件真实布局数据：

import { useState, Pressable } from 'react-native';

export default function App() {
  const [outerHeight, setOuterHeight] = useState(0);

  const handleOuterLayout = (event) => {
    // 获取组件实际渲染的高度
    const { height } = event.nativeEvent.layout;
    setOuterHeight(height);
  };

  return (
    <Pressable 
      onPress={() => console.log('外层高度：', outerHeight)} 
      style={{height: 500}}
      onLayout={handleOuterLayout}
    >
      {/* 子组件 */}
    </Pressable>
  );
}

3. 层级访问与操作 #

React Native无法通过parentElement向上遍历节点，需提前通过useRef定义各层级引用，或通过状态传递实现跨层级操作：

import { useState, Pressable, View, Button } from 'react-native';

export default function App() {
  const [outerStyle, setOuterStyle] = useState({height: 500});

  const handleButtonPress = () => {
    // 修改最外层组件的样式
    setOuterStyle({...outerStyle, height: 600});
  };

  return (
    <Pressable onPress={()=>{}} style={outerStyle}>
      <View style={{height: 300}}>
        <Button onPress={handleButtonPress} title="Clickable" color='blue' />
      </View>
    </Pressable>
  );
}

内容的提问来源于stack exchange，提问作者Experiment