android - 将自定义 Android Activity/ View 链接到 React Native

Question

问题

我的大部分应用都在 React Native 上，目前正在过渡到完整的原生构建(iOS 和 Android)。我决定零敲碎打，一次只构建某些组件。我拥有的组件之一是代表 Androids Bottom Sheet Behavior 。现实生活中的例子包括 Lyft 的新设计。即使我设置了窥视高度，BottomSheet 组件也没有显示。 。

尝试的解决方案

我仍然习惯于 Android Studio 并为 Android 构建应用程序，因此非常灵活地听到我的方法的改进。我应该使用 ViewGroup 吗？我是否应该使用一项 Activity ，如果可以，是否可以同时运行 2 项 Activity (就像上面的 Lyft 照片一样， map View 1 Activity 和底页是单独的 Activity ？)？

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

react 原生

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

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

Answer 1

我遇到了类似的问题并使用 进行了修复 fragment .
当前 React Native 版本 (0.66) 有关于如何实现它的示例代码的信息:
https://reactnative.dev/docs/native-components-android#1-create-a-fragment