这个问题确实戳中了很多RN开发者的痛点——想让导航过渡的圆角和系统原生完全对齐，提升体验，但React Native本身并没有提供直接获取设备圆角的API。不过别担心，我们有几个经过验证的靠谱方案，结合你的react-navigation场景，完全能解决问题：

方案1：设备型号映射表（最省心的兼容方案） #

思路 #

不同设备的屏幕圆角是固定的硬件参数，苹果、谷歌等厂商的主流机型圆角数据都是公开可查的。我们可以提前维护一个设备型号与圆角半径的映射表，通过设备型号匹配对应的值。

实现步骤 #

1. 先安装常用的设备信息工具库react-native-device-info（这个库稳定可靠，是RN生态的标配）
2. 导入库后，通过getModel()获取设备型号，再用预设的映射表匹配圆角值：

import DeviceInfo from 'react-native-device-info';

// 维护主流设备的圆角数据（单位：RN的pt，与原生单位一致）
const DEVICE_CORNER_MAP = {
  // iPhone 系列
  'iPhone 14 Pro': 47,
  'iPhone 14 Pro Max': 50,
  'iPhone 13/14': 45,
  'iPhone 12': 40,
  'iPhone 11': 39,
  'iPhone X/XS': 30,
  // 安卓主流机型
  'Pixel 7': 28,
  'Samsung Galaxy S23': 30,
  'OnePlus 11': 26,
};

// 处理设备内部代号（比如iPhone15,2对应iPhone 14 Pro）
const normalizeDeviceModel = (rawModel) => {
  const CODE_TO_MODEL = {
    'iPhone15,2': 'iPhone 14 Pro',
    'iPhone15,3': 'iPhone 14 Pro Max',
    'iPhone14,2': 'iPhone 13 Pro',
    // 更多设备代号可以查官方文档或第三方设备数据库
  };
  return CODE_TO_MODEL[rawModel] || rawModel;
};

// 对外暴露的获取圆角方法
export const getDeviceCornerRadius = () => {
  const rawModel = DeviceInfo.getModel();
  const normalizedModel = normalizeDeviceModel(rawModel);
  // 找不到匹配时返回默认值20pt（适配绝大多数安卓入门机型）
  return DEVICE_CORNER_MAP[normalizedModel] || 20;
};

优缺点 #

• ✅ 优点：精度极高，能1:1匹配原生系统的圆角效果，不需要写原生代码
• ❌ 缺点：需要持续维护映射表，新发布的机型要及时补充进去。如果你的用户群体集中在主流机型，这个方案完全够用。

方案2：原生模块动态获取（最精准的原生方案） #

思路 #

iOS和安卓原生系统都提供了直接获取屏幕圆角的API，我们可以写一个极简的原生模块，把这个值暴露给RN层。

iOS 实现要点 #

• iOS 15及以上：直接调用UIScreen.main.displayCornerRadius就能拿到准确的圆角值（单位pt，和RN的单位完全一致）
• iOS 13-14：没有直接API，可以通过屏幕尺寸结合已知设备数据推断，或者用safeAreaInsets辅助计算
• 写一个原生模块，暴露getCornerRadius()方法给RN

Android 实现要点 #

• Android 12及以上：通过DisplayCutout.getRoundedCornerRadius(RoundedCorner.POSITION_TOP_LEFT)获取左上角圆角（多数设备四个角半径一致）
• Android 11及以下：可以通过DisplayMetrics结合系统主题属性获取，或者用屏幕尺寸推断
• 同样暴露getCornerRadius()方法给RN

RN层调用示例 #

// 导入自己写的原生模块
import { DeviceCornerModule } from './native-modules';

// 获取圆角值
export const getDeviceCornerRadius = async () => {
  try {
    const radius = await DeviceCornerModule.getCornerRadius();
    return radius || 20; // 兜底默认值
  } catch (error) {
    console.warn('获取设备圆角失败，使用默认值:', error);
    return 20;
  }
};

优缺点 #

• ✅ 优点：动态获取，不需要维护设备列表，能适配所有机型（包括用户自定义圆角的安卓设备）
• ❌ 缺点：需要写原生代码，对纯JS开发者有一定门槛

方案3：动态近似计算（兜底方案） #

思路 #

如果不想依赖任何库或原生代码，可以用一个近似的动态计算方法，虽然精度稍差，但能应付大部分场景。

实现 #

创建一个全屏View，设置极大的borderRadius，然后测量View实际显示的内容尺寸，通过与屏幕尺寸的差值计算出近似圆角：

import { useLayoutEffect, useState, useRef } from 'react';
import { Dimensions, View, findNodeHandle, UIManager } from 'react-native';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

export const useApproximateCornerRadius = () => {
  const [cornerRadius, setCornerRadius] = useState(20);
  const testViewRef = useRef(null);

  useLayoutEffect(() => {
    const measureCornerRadius = () => {
      if (!testViewRef.current) return;

      const viewHandle = findNodeHandle(testViewRef.current);
      if (!viewHandle) return;

      UIManager.measure(viewHandle, (x, y, viewWidth, viewHeight) => {
        // 取宽高差值的最小值的一半作为近似圆角
        const widthDiff = screenWidth - viewWidth;
        const heightDiff = screenHeight - viewHeight;
        const approxRadius = Math.min(widthDiff, heightDiff) / 2;
        setCornerRadius(approxRadius > 0 ? approxRadius : 20);
      });
    };

    measureCornerRadius();
  }, []);

  // 这个测试View会全屏覆盖但完全不可见
  return {
    cornerRadius,
    TestView: <View ref={testViewRef} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 9999, overflow: 'hidden', opacity: 0 }} />,
  };
};

组件中使用 #

const App = () => {
  const { cornerRadius, TestView } = useApproximateCornerRadius();

  return (
    <View style={{ flex: 1 }}>
      {TestView}
      {/* 你的导航容器或页面内容 */}
    </View>
  );
};

优缺点 #

• ✅ 优点：纯JS实现，零依赖
• ❌ 缺点：精度有限，部分安卓设备可能因为系统设置出现误差

结合react-navigation使用 #

获取到圆角值后，你可以在导航容器的全局配置中设置，让所有屏幕自动适配：

import { NavigationContainer } from '@react-navigation/native';
import { useLayoutEffect, useState } from 'react';
import { getDeviceCornerRadius } from './your-utils-file';

const App = () => {
  // 可以用useState+useEffect异步获取，或者在启动时同步获取
  const [screenCornerRadius, setScreenCornerRadius] = useState(20);

  useLayoutEffect(() => {
    const fetchRadius = async () => {
      const radius = await getDeviceCornerRadius(); // 如果是异步方法
      setScreenCornerRadius(radius);
    };
    fetchRadius();
  }, []);

  return (
    <NavigationContainer
      screenOptions={{
        cardStyle: {
          borderRadius: screenCornerRadius,
          overflow: 'hidden', // 必须设置overflow:hidden才能生效
        },
      }}
    >
      {/* 你的导航栈 */}
    </NavigationContainer>
  );
};

最后几点注意事项 #

1. 测试时一定要覆盖不同机型，尤其是安卓的小众机型
2. 所有方案都要设置兜底默认值（比如20pt），避免获取失败导致异常
3. 安卓部分设备支持用户自定义圆角大小，这种场景只有原生方案能准确获取