React Native:调整自定义UI组件的大小

问题描述

我已经构建了一个非常简单的本机Android UI组件，并且当单击我的本机项目中的按钮时，我想更新其子视图的大小.更精确地说，当单击此按钮时，我向SimpleViewManager发送命令，该命令又调用自定义视图的resizeLayout().

I've built a very simple native Android UI component and I want to update the size of its child view when a button from my react native project is clicked. To be more precise, when this button is clicked then I send a command to my SimpleViewManager which in turn calls the resizeLayout() of my custom view.

我可以验证resizeLayout()是否已正确调用，但布局没有调整大小，直到我旋转手机.显然，更改设备的方向会触发自定义视图的draw()，但是我显式调用的invalidate()也会触发.

I can verify that the resizeLayout() is properly called but the layout is not resized until I rotate the phone. Obviously, changing the device's orientation triggers the draw() of my custom view but so does the invalidate() which I explicitly call.

其他布局更改(例如更改背景颜色而不是调整其大小)可以正常工作.

Other layout changes like changing the background color instead of resizing it work fine.

我的自定义组件如下:

public class CustomComponent extends RelativeLayout {
    public CustomComponent(Context context) {
        super(context);
        init();
    }

    public CustomComponent(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomComponent(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        inflate(getContext(), R.layout.simple_layout, this);
    }

    public void resizeLayout(){
        LinearLayout childLayout = (LinearLayout) findViewById(R.id.child_layout);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) childLayout.getLayoutParams();
        layoutParams.height = 50;
        layoutParams.width= 50;
        childLayout.setLayoutParams(layoutParams);

        invalidate();
    }
}

和simple_layout.xml看起来像这样:

and the simple_layout.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/child_layout"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="#ffee11"/>
</RelativeLayout>

任何帮助将不胜感激.

推荐答案

经过几天的搜索，我终于在此在React Native的repo中已报告的旧问题.

After a couple of days of searching, I finally found the answer in this old reported issue in React Native's repo.

此解决方案与 ReactPicker.java 和 ReactToolbar.java .我必须将以下代码放入CustomComponent中，之后甚至无需调用requestLayout()或invalidate().更新布局的LayoutParams会立即传播更改.

This solution is the same as the ones used in ReactPicker.java and ReactToolbar.java. I had to put the following code in my CustomComponent and after that there is no need to even call requestLayout() or invalidate(). The changes are propagated as soon as I update my layout's LayoutParams.

@Override
public void requestLayout() {
    super.requestLayout();

    // The spinner relies on a measure + layout pass happening after it calls requestLayout().
    // Without this, the widget never actually changes the selection and doesn't call the
    // appropriate listeners. Since we override onLayout in our ViewGroups, a layout pass never
    // happens after a call to requestLayout, so we simulate one here.
    post(measureAndLayout);
}

private final Runnable measureAndLayout = new Runnable() {
    @Override
    public void run() {
        measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
        layout(getLeft(), getTop(), getRight(), getBottom());
    }
};

这篇关于React Native:调整自定义UI组件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！