React Native基于组件宽度动态设置borderWidth且不暴露为props的方法

你可以通过组件自身的onLayout布局回调获取实际渲染宽度，内部计算borderWidth即可，无需对外暴露相关props，参考实现如下：

import { useState } from 'react';
import { View, type LayoutChangeEvent } from 'react-native';

// 保持原有BasicViewProps定义即可，无需新增borderWidth相关参数
type BasicViewProps = Record<string, unknown>;

export default function BasicView(props: BasicViewProps): JSX.Element {
  // 存储动态计算的边框宽度，初始值可保留原有默认值
  const [borderWidth, setBorderWidth] = useState(10);

  const handleLayout = (e: LayoutChangeEvent) => {
    const { width } = e.nativeEvent.layout;
    // 自定义计算规则：示例取组件宽度的2%，同时设置最小/最大值避免边框过细或过粗
    const calculatedWidth = Math.min(Math.max(width * 0.02, 2), 10);
    setBorderWidth(calculatedWidth);
  };

  return (
    <View
      onLayout={handleLayout}
      style={{
        maxHeight: "100%",
        width: "100%",
        aspectRatio: 2,
        borderWidth: borderWidth,
        borderColor: "black",
        backgroundColor: "red",
      }}
    >
    </View>
  );
}

• onLayout会在组件布局计算完成后自动触发，拿到的宽度是组件当前实际渲染的尺寸，适配各种父容器下的组件大小场景
• 计算规则可以根据业务需求自行调整，比如按设计稿比例、屏幕密度换算都可以，所有逻辑都封装在组件内部，外部完全无感知
• 首次渲染不会出现布局跳动：React Native会先执行布局计算再绘制内容，边框宽度会在首次绘制时就应用计算后的取值

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