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：调整自定义用户界面组件的大小

回答

相关问题