将自定义Android活动/视图链接到React Native

Question

问题

我的大部分应用程序都在React Native上，并且目前正在过渡到完整的本地版本（iOS和Android）。我决定将其零散地做，并且一次只构建某些组件。我拥有的组件之一是Androids Bottom Sheet Behavior的代表。现实生活中的例子包括Lyft的新设计。即使设置了窥视高度，BottomSheet组件也不会显示。 。

尝试的解决方案

我仍然习惯于Android Studio和为Android构建应用程序，因此非常灵活地了解我的方法的改进。我应该使用ViewGroup吗？我应该使用一个活动，如果可以的话，是否可以同时运行两个活动（就像上面的Lyft照片一样，地图视图1的活动和底部的表是一个单独的活动吗？）？

BottomSheetView

public class BottomSheetView extends ViewGroup {

    private BottomSheetBehavior mBottomSheetBehavior;

    public BottomSheetActivity(Context context) {
        super(context);
        init();
    }

    private void init() {
        inflate(getContext(), R.layout.bottom_sheet, this);
        CoordinatorLayout coordinaterLayout = findViewById(R.id.coordinate_layout);
        View bottomSheet = coordinaterLayout.findViewById(R.id.bottom_sheet_component);
        mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        mBottomSheetBehavior.setHideable(false);
        mBottomSheetBehavior.setPeekHeight(200);
    }

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
    }
}

BottomSheetManager

public class BottomSheetManager extends ViewGroupManager<BottomSheetView> {
    public static final String REACT_CLASS = "BottomSheet";

    private BottomSheetView bottomSheet;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected BottomSheetView createViewInstance(ThemedReactContext reactContext) {
        return new BottomSheetView(reactContext);
    }

}

BottomSheetPackage

...
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(new BottomSheetManager());
}

反应原生

import react, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
const BottomSheet = requireNativeComponent('BottomSheet', SomeClass);

class SomeClass extends Component {
    render() {
      return (<BottomSheet />);
    }
}