CoordinatorLayout和BottomSheetBehavior的react-native包装器

Question

我一直在编写包含BottomSheetBehavior的原生android模块。

可以像这样实现一个非常简单的BottomSheetBehavior https://gist.github.com/cesardeazevedo/a4dc4ed12df33fe1877fc6cea42475ae

我遇到的第一件事，整个页面必须是CoordinatorLayout的子节点和底部的BottomSheetBehavior。

所以我必须编写2个原生模块，>>> n = nature() >>> next(n) 0 >>> next(n) 1 >>> next(n) 2 >>> next(n) 3 和<CoordinatorLayout />。

这是bottomSheetBehavior包装器。

BottomSheetBehaviorManager.java

<BottomSheetBehavior />

BottomSheetBehaviorView.java

public class BottomSheetBehaviorManager extends ViewGroupManager<BottomSheetBehaviorView> {

    @Override
    public BottomSheetBehaviorView createViewInstance(ThemedReactContext context) {
        return new BottomSheetBehaviorView(context);
    }
}

我的反应成分变得像这样。

index.android.js

public class BottomSheetBehaviorView extends RelativeLayout {

    public BottomSheetBehaviorView(Context context) {
        super(context);

        int width  = ViewGroup.LayoutParams.WRAP_CONTENT;
        int height = ViewGroup.LayoutParams.WRAP_CONTENT;
        // int height = 1000; // fixed a height works, it only slide up half of the screen

        CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(width, height);
        params.setBehavior(new BottomSheetBehavior());
        this.setLayoutParams(params);

        BottomSheetBehavior<BottomSheetBehaviorView> bottomSheetBehavior = BottomSheetBehavior.from(this);
        bottomSheetBehavior.setHideable(false);
        bottomSheetBehavior.setPeekHeight(200);
    }
}

它有效！

但是我一直在努力让BottomSheet用 return () { <CoordinatorLayout style={{flex: 1}}> <View><!--app--></View> <BottomSheetBehavior> <View style={{height: 300}}> <!--height doesnt work--> <Text>BottomSheetBehavior !</Text> </View> </BottomSheetBehavior> </CoordinatorLayout> ) 包裹他们的孩子，它不应该滑动整个屏幕，它应该只滑过包裹的内容（在这种情况下是lorem ipsum文本） ，它适用于Android组件，但它不适用于react组件。那么，如何让wrap_content包装一个反应RelativeLayout组件？我也试图实现一些measure shadownode，但没有按预期工作，我不知道它们是如何工作的。

我在我的github上添加了这个例子，每个人都想尝试一下。 https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

Answer 1

经过大量的调试，最后我得到了它，我不得不做两件事，首先是覆盖onMeasure函数并将子高度应用到setMeasuredDimension，并且显然修正了高度问题，但是在玩完之后一点点，状态上的任何更改都会破坏bottomSheet的位置，因此我必须通过UIManager.dispatchViewManagerCommand为每个状态更改调用requestLayout，并且运行良好。

所以，这是修复的实现。

commit

BottomSheetBehaviorView.js

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    View child = this.getChildAt(0);

    if (child != null) {
        setMeasuredDimension(widthMeasureSpec, child.getHeight());
    }
}

BottomSheetBehaviorManager.js

@Override
public Map<String, Integer> getCommandsMap() {
    return MapBuilder.of("setRequestLayout", COMMAND_SET_REQUEST_LAYOUT);
}

@Override
public void receiveCommand(BottomSheetBehaviorView view, int commandType, @Nullable ReadableArray args) {
    if (commandType == COMMAND_SET_REQUEST_LAYOUT) {
        setRequestLayout(view);
    }
}

private void setRequestLayout(BottomSheetBehaviorView view) {
    view.requestLayout();
}

BottomSheetBehavior.js

  componentDidUpdate() {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this),
      UIManager.RCTBottomSheetBehaviorAndroid.Commands.setRequestLayout,
      [],
    )
  }

更新

我意识到在滑动闪烁所有布局时更新状态，在查看一些库代码之后，我找到了needsCustomLayoutForChildren函数，这在ViewGroupManager.java上有描述

  /**
   * Returns whether this View type needs to handle laying out its own children instead of
   * deferring to the standard css-layout algorithm.
   * Returns true for the layout to *not* be automatically invoked. Instead onLayout will be
   * invoked as normal and it is the View instance's responsibility to properly call layout on its
   * children.
   * Returns false for the default behavior of automatically laying out children without going
   * through the ViewGroup's onLayout method. In that case, onLayout for this View type must *not*
   * call layout on its children.
   */
  public boolean needsCustomLayoutForChildren() {
    return false;
  }

所以我fixed在CoordinatorLayoutManager.java

上返回true

这是它的样子。