Блог

Проблема

Большая часть моего приложения находится на React Native, и в настоящее время я перехожу на полные собственные сборки (iOS и Android). Я решил сделать это по частям и создавать только определенные компоненты за раз. Один из имеющихся у меня компонентов является репрезентативным для поведения на нижней панели Android. В качестве примеров из реальной жизни можно привести новый дизайн 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());
}
  

React Native

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

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

Я столкнулся с аналогичной проблемой и исправил ее с помощью фрагмента. Текущая версия React Native (0.66) содержит информацию с примером кода о том, как ее реализовать:

https://reactnative.dev/docs/native-components-android#1-create-a-fragment