facebook / componentkit

A React-inspired view framework for iOS.
http://www.componentkit.org/
Other
5.76k stars 587 forks source link

How to make children component height equal to Scroll component's content view height but Scroll component's height #970

Closed LinkRober closed 2 years ago

LinkRober commented 2 years ago

I create a scroll component

@interface LeMobileScrollComponent()

@property (nonatomic, strong) CKFlexboxComponent *scrollComponent;

@end

@implementation LeMobileScrollComponent

+ (instancetype)newWithListViewAttributes:(const CKViewComponentAttributeValueMap &)viewAttributes
                                     size:(const CKComponentSize &)size
                                    style:(const CKFlexboxComponentStyle &)style
                                 children:(std::vector<CKFlexboxComponentChild>)children {
    CKComponentScope scope(self);
    CKComponentViewConfiguration viewConfiguration = {&scrollViewInstanceFuc,viewAttributes};
    CKFlexboxComponent *scrollComponent = [CKFlexboxComponent newWithView:viewConfiguration size:size style:style children:children];
    LeMobileScrollComponent *c = [super newWithComponent:scrollComponent];
    c.scrollComponent = scrollComponent;
    return c;
}

+ (Class<CKComponentControllerProtocol>)controllerClass {
    return [LeMobileScrollComponentController class];
}

@end

@implementation LeMobileScrollComponentController

- (void)didMount {
    [super didMount];
    //  Get scroll component
    LeMobileScrollComponent *component = (LeMobileScrollComponent*)self.component;
    CKFlexboxComponent *scrollComponent = component.scrollComponent;
    //  Get component size
    CKSizeRange range = CKSizeRange();
    CKComponentLayout layout = [scrollComponent computeLayoutThatFits:range];
    //  Get scroll view
    UIScrollView *scrollView = (UIScrollView *)scrollComponent.viewContext.view;
    //  Set contentSize
    [scrollView setContentSize:layout.size];
}

//  Invoked when the component is updated
- (void)didUpdateComponent{
  [super didUpdateComponent];
}

@end

I hope that first child contain component'height equal to scoll component content view'height rather than scroll component view‘height. example photo below IMG_0243A8092629-1

xavierjurado commented 2 years ago

Hey @LinkRober, CKFlexboxComponent is not designed to be used like a UIScrollView, it's instead similar to UIKit's UIStackView.

My suggestion is to wrap your items inside a UICollectionView instead . While it requires a bit more code, you'll gain the benefits of component reuse and all the goods from CKDataSource. Take a look at our documentation and our sample code for more details!

LinkRober commented 2 years ago

@xavierjurado thx I got it