Native Android View中子组件无法正确调整尺寸问题求助

问题现象 #

自定义Android LinearGradient原生View作为容器包裹RN的TouchableOpacity组件时，首次加载TouchableOpacity会占满整个屏幕宽高，不符合预期；触发Fast Refresh（修改样式后刷新）后布局恢复正常，即使给TouchableOpacity设置固定高度也无效。

首次加载布局：

Fast Refresh后布局：

相关代码 #

Android原生代码（Kotlin） #

class CealGradientView(context: Context): LinearLayout(context){

    fun configureViews(color: ReadableArray){
        val layoutParams: ViewGroup.LayoutParams =
            LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        setLayoutParams(layoutParams)


        val colorsCollection: ArrayList<Int> = ArrayList()
        for (i in 0 until color.size()) {
            colorsCollection.add(Color.parseColor(color.getString(i)))
        }
        val colors = colorsCollection.stream().mapToInt { i -> i }.toArray()
        val gradientDrawable = GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            colors
        )
        background = gradientDrawable
}

class CealGradientManager(private val reactApplicationContext: ReactApplicationContext):
    ViewGroupManager<CealGradientView>() {

    private val cealGradientView = "CealGradientView"

    override fun getName() = cealGradientView

    override fun createViewInstance(reactContext: ThemedReactContext): CealGradientView {
        return CealGradientView(reactContext)
    }

    @ReactProp(name = "colors")
    fun configureView(view: CealGradientView, color: ReadableArray) {
        view.configureViews(color)
    }
}

React Native代码（JSX） #

<CealGradientView colors={[theme.Primary_50, theme.Information]} style={styles.linearGradient}>
  <BorderButton text={EXISTING_USER} onPress={() => {}} isDarkMode={isDarkMode} />
</CealGradientView>

const BorderButton = ({ text, isDarkMode, onPress }: Props) => {
  const theme = THEME_COLOR.SET(isDarkMode)

  return (
    <TouchableOpacity style={[styles.buttonStyle, { borderColor: theme.White }]} onPress={onPress}>
      <Text style={[styles.textStyle, { color: theme.White }]}>{text}</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: '100%',
    borderRadius: 8,
    alignItems: 'center',
    borderWidth: 1,
  },
  textStyle: {
    fontFamily: Fonts.InterSemiBold,
    fontSize: 16,
    lineHeight: 48,
    textTransform: 'uppercase',
  },
})

已尝试无效方案 #

• 参考相关Issue调整布局，未解决
• 添加手动布局代码，无效果：

private fun setupLayout() {
        Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
            override fun doFrame(frameTimeNanos: Long) {
                manuallyLayoutChildren()
                viewTreeObserver.dispatchOnGlobalLayout()
                Choreographer.getInstance().postFrameCallback(this)
            }
        })
    }

    /**
     * Layout all children properly
     */
    private fun manuallyLayoutChildren() {
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            child.measure(MeasureSpec.makeMeasureSpec(measuredWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(measuredHeight, MeasureSpec.EXACTLY))
            child.layout(0, 0, child.measuredWidth, child.measuredHeight)
        }
    }

解决方案 #

问题根源 #

自定义原生View未正确实现React Native的布局协议，RN需要原生View提供准确的测量逻辑来计算自身尺寸，首次布局时如果原生View返回的尺寸不正确，RN会默认给子组件传递全屏约束，导致TouchableOpacity占满屏幕。Fast Refresh时RN重新计算布局，此时原生View的尺寸可能已被正确初始化，因此布局恢复正常。

修改Android原生代码 #

1. 调整CealGradientManager，重写onMeasure方法实现正确的测量逻辑：

class CealGradientManager(private val reactApplicationContext: ReactApplicationContext):
    ViewGroupManager<CealGradientView>() {

    private val cealGradientView = "CealGradientView"

    override fun getName() = cealGradientView

    override fun createViewInstance(reactContext: ThemedReactContext): CealGradientView {
        val view = CealGradientView(reactContext)
        // 初始化时设置默认布局参数
        view.layoutParams = LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        return view
    }

    @ReactProp(name = "colors")
    fun configureView(view: CealGradientView, color: ReadableArray) {
        view.configureViews(color)
    }

    // 重写测量方法，根据子组件尺寸确定自身大小
    override fun onMeasure(
        view: CealGradientView,
        widthMeasureSpec: Int,
        heightMeasureSpec: Int
    ) {
        super.onMeasure(view, widthMeasureSpec, heightMeasureSpec)
        if (view.childCount > 0) {
            val child = view.getChildAt(0)
            child.measure(widthMeasureSpec, heightMeasureSpec)
            // 让容器尺寸匹配子组件
            view.setMeasuredDimension(child.measuredWidth, child.measuredHeight)
        } else {
            // 无组件时使用默认测量规则
            view.setMeasuredDimension(
                View.resolveSize(0, widthMeasureSpec),
                View.resolveSize(0, heightMeasureSpec)
            )
        }
    }
}

2. 修改CealGradientView，移除configureViews中重复设置布局参数的代码（避免覆盖RN传递的参数），并初始化布局方向：

class CealGradientView(context: Context): LinearLayout(context){

    init {
        // 设置垂直布局，确保子组件排列正确
        orientation = VERTICAL
    }

    fun configureViews(color: ReadableArray){
        // 移除此处LayoutParams设置，交由Manager处理
        val colorsCollection: ArrayList<Int> = ArrayList()
        for (i in 0 until color.size()) {
            colorsCollection.add(Color.parseColor(color.getString(i)))
        }
        val colors = colorsCollection.stream().mapToInt { i -> i }.toArray()
        val gradientDrawable = GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            colors
        )
        background = gradientDrawable
    }
}

3. RN端补充布局约束（可选，增强稳定性）：
   给CealGradientView添加明确的布局约束，比如限制宽度或设置对齐方式：

<CealGradientView 
  colors={[theme.Primary_50, theme.Information]} 
  style={[styles.linearGradient, { alignSelf: 'center', width: '90%' }]}
>
  <BorderButton text={EXISTING_USER} onPress={() => {}} isDarkMode={isDarkMode} />
</CealGradientView>

效果验证 #

修改后重新编译运行，首次加载时TouchableOpacity会按照预期尺寸显示，无需依赖Fast Refresh修复布局。

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