React Native: изменение размера пользовательского интерфейса

Я создал очень простой нативный компонент пользовательского интерфейса Android и хочу обновить размер его дочернего представления, когда нажимается кнопка из моего собственного нативного проекта. Если быть более точным, при нажатии этой кнопки я посылаю команду своему SimpleViewManager который в свою очередь называет resizeLayout() моего собственного представления.

Я могу убедиться, что resizeLayout() правильно называется, но размер не изменяется, пока я не поверну телефон. Очевидно, что изменение ориентации устройства вызывает draw() моего собственного представления, но и invalidate() который я явно называю.

Другие изменения макета, такие как изменение цвета фона вместо изменения размера, работают нормально.

Мой пользовательский компонент выглядит так:

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 выглядит так:

<?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>

Любая помощь будет принята с благодарностью.

Источник

2 ответа

Решение

После нескольких дней поиска я наконец нашел ответ на эту старую проблему репо "Реагировать нативом".

Это решение такое же, как и в ReactPicker.java и ReactToolbar.java. Мне пришлось поместить следующий код в мой CustomComponent, и после этого нет необходимости даже звонить requestLayout() или же invalidate(), Изменения распространяются, как только я обновляю 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());
    }
};
Источник

Попробуйте запустить

requestLayout();

вместо признания недействительным.

Этот пост также содержит полезную информацию о жизненном цикле представления.

Использование forceLayout(), requestLayout() и invalidate()

Я также рекомендовал бы изменить корневой элемент в вашем представлении xml на

<merge>

таким образом, ваш класс CustomComponent не имеет RelativeLayout в качестве своего непосредственного потомка, если только это не то, к чему вы стремились.

Источник
Другие вопросы по тегам