12

BottomSheetBehaviorをラップするネイティブ Android モジュールを作成しています。

非常に単純な BottomSheetBehavior は、次のように実装できます https://gist.github.com/cesardeazevedo/a4dc4ed12df33fe1877fc6cea42475ae

私が直面した最初のことは、ページ全体が CoordinatorLayout の子であり、その末尾に BottomSheetBehavior がなければならないことです。

そのため、2 つのネイティブ モジュールを作成する必要が<CoordinatorLayout />あり<BottomSheetBehavior />ました。

これは、bottomSheetBehavior ラッパーです。

BottomSheetBehaviorManager.java

public class BottomSheetBehaviorManager extends ViewGroupManager<BottomSheetBehaviorView> {

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

BottomSheetBehaviorView.java

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);
    }
}

そして、私の反応コンポーネントはこのようになります。

index.android.js

  return () {
    <CoordinatorLayout style={{flex: 1}}>
      <View><!--app--></View>
      <BottomSheetBehavior>
        <View style={{height: 300}}> <!--height doesnt work-->
          <Text>BottomSheetBehavior !</Text>
        </View>
      </BottomSheetBehavior>
    </CoordinatorLayout>
  )

そしてそれはうまくいきます！

反応ネイティブボトムシート動作

しかし、BottomSheet で子を でラップするのに苦労してきました。wrap_content画面全体をスライドさせることは想定されていませんでした。反応コンポーネントでは機能しません。では、RelativeLayoutreact<View style={{height: 300}} />コンポーネントをラップする方法は? また、いくつかのメジャー shadownodeを実装しようとしましたが、期待どおりに機能しませんでした。それらがどのように機能するかわかりません。

誰もが試してみたいと思うように、この例を github に追加しました。 https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

4

1 に答える 1

3

多くのデバッグの後、最終的に私はそれを手に入れました.2つのことをしなければなりませんでした.最初はonMeasure関数をオーバーライドし、子の高さをsetMeasuredDimension.状態はbottomSheetの位置を壊すので、状態が変わるたびにUIManager.dispatchViewManagerCommandを介してrequestLayoutを呼び出す必要があり、非常にうまく機能します。

それで、それが修正する実装です。

専念

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,
      [],
    )
  }

アップデート

スライド中に状態を更新すると、すべてのレイアウトがちらつくことに気付きました。いくつかのライブラリ コードを調べた後、ViewGroupManager.java で説明されている needsCustomLayoutForChildren 関数を見つけました。

  /**
   * 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;
  }

だから私はCoordinatorLayoutManager.Javaでtrueを返すように修正しました

これがどのように見えるかです。

反応ネイティブボトムシート動作

于 2016-08-16T11:46:30.980 に答える