CoordinatorLayoutとBottomSheetBehaviorのための反応ネイティブラッパー

Question

私はBottomSheetBehaviorをラップするネイティブアンドロイドモジュールを作成しています。

非常に単純なBottomSheetBehaviorは私が直面した最初の事、ページ全体がそれの終わりにCoordinatorLayoutとBottomSheetBehaviorの子でなければなりません。この https://gist.github.com/cesardeazevedo/a4dc4ed12df33fe1877fc6cea42475ae

のように実装することができます。

私は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と彼らのチャイルズをラップ作るのに苦労してきた、それが画面全体をスライドすることになっていなかったです、それはこの場合のみに包まれたコンテンツ（Loremのイプサムてスライドさせなければなりませんテキスト）、それはアンドロイドコンポーネントで動作しますが、反応コンポーネントでは動作しません。だから、RelativeLayoutをどのようにラップするのですか？<View style={{height: 300}} />コンポーネントですか？私もいくつかmeasure shadownodeを実装しようとしましたが、予想どおりに動作しませんでした、彼らはどのように動作するのか分かりません。

誰もが試してみたいという私のgithubにこの例を追加しました。デバッグの多くの後https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

Answer 1

、最終的に私はそれを得た、私は最初setMeasuredDimensionに子の高さをonMeasure機能を無効にして適用することだった、と明らかに高さの問題が修正されますが、再生した後、2つのことをしなければなりませんでしたちょっと、状態の変更が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, 
     [], 
    ) 
    } 

更新

私はいくつかのライブラリのコードを見た後、私は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; 
    } 

に記述されているneedsCustomLayoutForChildren機能を、見つけ、スライドさせながら状態を更新すると、すべてのレイアウトをちらつくことに気づきましたしたがって、fixedはCoordinatorLayoutManager.javaでtrueを返します

これはどのように見えますか？