React Native：調整自定義用戶界面組件的大小

我已經構建了一個非常簡單的本機Android用戶界面組件，並且我想在點擊我的反應本地項目中的按鈕時更新其子視圖的大小。更確切地說，點擊這個按鈕後，我發送一個命令給我的SimpleViewManager，然後調用我的自定義視圖的resizeLayout()。React Native：調整自定義用戶界面組件的大小

我可以驗證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>

任何幫助將不勝感激。

來源

2016-10-03 George

經過幾天的搜索，我終於在this上找到了有關反應原生回購的舊報告問題的答案。

此解決方案與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()); 
    } 
};

來源

2016-10-03 19:11:41 George

謝謝。幫助我解決了在層次結構中未得到更新的定製添加使用java視圖的問題。（只需將你的自定義視圖放在容器中，用上面的方法覆蓋） – Venryx

實際上，對於我的情況，顯然還有一步：添加上述容器視圖（我從RelativeLayout繼承）後，調用'''container.layout （0，0，寬度，高度）;'''就可以了。 – Venryx

這對我有很大幫助，我們的圖書館被卡在寬度：0，height：0，因爲顯然在ReactNative應用程序中的requestLayout並不是非常有用。添加賞金。 –

嘗試運行

requestLayout();

，而不是無效。

這篇文章對視圖生命週期也有一些很好的信息。

Usage of forceLayout(), requestLayout() and invalidate()

我也建議改變你的根元素在您的視圖XML來

<merge>

這樣你CustomComponent類不具有的RelativeLayout作爲其直接子，除非那是你是什麼要去。

來源

2016-10-03 17:07:38 ootinii

你好，非常感謝你的回答。使用''實際上是一個好主意。不過，我已經嘗試在我的CustomComponent以及childLayout中調用上述所有方法。該代碼在Android項目中正常工作。當我將它與React Native結合使用時，會出現問題。 – George

React Native：調整自定義用戶界面組件的大小

回答

相關問題