React Native如何获取元素样式值？（React Hook+useRef场景）

Great question! In React Native, getting computed styles like borderRadius or backgroundColor via a ref is a bit different from web React, but there are a couple of straightforward ways to do it depending on your scenario.

1. Access Defined Styles Directly (No Ref Needed) #

If you’ve defined the styles yourself—either inline or via StyleSheet.create—you don’t even need a ref to grab these values. You can reference the style object directly:

import { View, StyleSheet } from 'react-native';

const MyComponent = () => {
  const boxStyles = StyleSheet.create({
    container: {
      borderRadius: 12,
      backgroundColor: '#FF5722',
      width: 150,
      height: 150,
    },
  });

  // Access style values directly from the object
  console.log('borderRadius:', boxStyles.container.borderRadius);
  console.log('backgroundColor:', boxStyles.container.backgroundColor);

  return <View style={boxStyles.container} />;
};

This works perfectly for static or dynamically generated styles that you control directly in your code.

2. Get Computed Styles via Ref (For Dynamic/Inherited Styles) #

If you need styles that are applied dynamically—like from parent props, third-party components, or state-altered styles—you’ll need to use useRef along with React Native’s UIManager and findNodeHandle to fetch the computed styles from the native view.

Here’s a complete example:

import { useRef, useEffect } from 'react';
import { View, UIManager, findNodeHandle } from 'react-native';

const DynamicStyleComponent = () => {
  const viewRef = useRef(null);

  useEffect(() => {
    const fetchComputedStyles = () => {
      if (!viewRef.current) return;

      const nodeHandle = findNodeHandle(viewRef.current);
      if (!nodeHandle) return;

      // UIManager.getViewStyle is asynchronous, handle results in the callback
      UIManager.getViewStyle(nodeHandle, (computedStyles) => {
        console.log('Computed borderRadius:', computedStyles.borderRadius);
        console.log('Computed backgroundColor:', computedStyles.backgroundColor);
        // You can access other properties like borderWidth, padding, etc. here too
      });
    };

    fetchComputedStyles();
  }, []); // Run once after component mounts

  return (
    <View
      ref={viewRef}
      style={{
        borderRadius: 20,
        backgroundColor: '#2196F3',
        width: 200,
        height: 200,
      }}
    />
  );
};

Key Notes:

• UIManager.getViewStyle is asynchronous, so you’ll need to process the result inside the callback function.
• Ensure your ref is attached directly to a native React Native component (like View, Text, etc.). If using a custom component, forward the ref to its underlying native view.
• This method works for runtime-applied styles, including those inherited from parent components or modified via state.

Why measure Isn’t Enough #

You mentioned using measure to get position data—this method only returns layout information (x, y, width, height). To access actual style properties like borderRadius or backgroundColor, UIManager.getViewStyle is the correct tool for the job.

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