Add support for aspectRatio style prop
Summary: Expose aspectRatio style prop from css-layout to React Native. This means the following will now work: <View style={{backgroundColor: 'blue', aspectRatio: 1}}/> Reviewed By: javache Differential Revision: D4226472 fbshipit-source-id: c8709a7c0abbf77089a4e867879b42dcd9116f65
This commit is contained in:
Родитель
1488725db3
Коммит
5850165795
|
@ -365,6 +365,21 @@ var LayoutPropTypes = {
|
|||
flexShrink: ReactPropTypes.number,
|
||||
flexBasis: ReactPropTypes.number,
|
||||
|
||||
/**
|
||||
* Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
|
||||
* non-standard property only available in react native and not CSS.
|
||||
*
|
||||
* - On a node with a set width/height aspect ratio control the size of the unset dimension
|
||||
* - On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
|
||||
* if unset
|
||||
* - On a node with a measure function aspect ratio works as though the measure function measures
|
||||
* the flex basis
|
||||
* - On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
|
||||
* if unset
|
||||
* - Aspect ratio takes min/max dimensions into account
|
||||
*/
|
||||
aspectRatio: ReactPropTypes.number,
|
||||
|
||||
/** `zIndex` controls which components display on top of others.
|
||||
* Normally, you don't use `zIndex`. Components render according to
|
||||
* their order in the document tree, so later components draw over
|
||||
|
|
|
@ -138,6 +138,8 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
|
|||
@property (nonatomic, assign) float flexShrink;
|
||||
@property (nonatomic, assign) float flexBasis;
|
||||
|
||||
@property (nonatomic, assign) float aspectRatio;
|
||||
|
||||
- (void)setFlex:(float)flex;
|
||||
|
||||
/**
|
||||
|
|
|
@ -652,6 +652,7 @@ RCT_STYLE_PROPERTY(AlignItems, alignItems, AlignItems, CSSAlign)
|
|||
RCT_STYLE_PROPERTY(Position, position, PositionType, CSSPositionType)
|
||||
RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, CSSWrap)
|
||||
RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, CSSOverflow)
|
||||
RCT_STYLE_PROPERTY(AspectRatio, aspectRatio, AspectRatio, float)
|
||||
|
||||
- (void)setBackgroundColor:(UIColor *)color
|
||||
{
|
||||
|
|
|
@ -294,6 +294,7 @@ RCT_EXPORT_SHADOW_PROPERTY(justifyContent, CSSJustify)
|
|||
RCT_EXPORT_SHADOW_PROPERTY(alignItems, CSSAlign)
|
||||
RCT_EXPORT_SHADOW_PROPERTY(alignSelf, CSSAlign)
|
||||
RCT_EXPORT_SHADOW_PROPERTY(position, CSSPositionType)
|
||||
RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
|
||||
|
||||
RCT_EXPORT_SHADOW_PROPERTY(overflow, CSSOverflow)
|
||||
|
||||
|
|
|
@ -112,6 +112,11 @@ public class LayoutShadowNode extends ReactShadowNode {
|
|||
super.setFlexBasis(flexBasis);
|
||||
}
|
||||
|
||||
@ReactProp(name = ViewProps.ASPECT_RATIO, defaultFloat = CSSConstants.UNDEFINED)
|
||||
public void setAspectRatio(float aspectRatio) {
|
||||
setStyleAspectRatio(aspectRatio);
|
||||
}
|
||||
|
||||
@ReactProp(name = ViewProps.FLEX_DIRECTION)
|
||||
public void setFlexDirection(@Nullable String flexDirection) {
|
||||
if (isVirtual()) {
|
||||
|
|
|
@ -576,6 +576,10 @@ public class ReactShadowNode {
|
|||
mCSSNode.setFlexBasis(flexBasis);
|
||||
}
|
||||
|
||||
public void setStyleAspectRatio(float aspectRatio) {
|
||||
mCSSNode.setStyleAspectRatio(aspectRatio);
|
||||
}
|
||||
|
||||
public void setFlexDirection(CSSFlexDirection flexDirection) {
|
||||
mCSSNode.setFlexDirection(flexDirection);
|
||||
}
|
||||
|
|
|
@ -64,6 +64,8 @@ public class ViewProps {
|
|||
public static final String MIN_HEIGHT = "minHeight";
|
||||
public static final String MAX_HEIGHT = "maxHeight";
|
||||
|
||||
public static final String ASPECT_RATIO = "aspectRatio";
|
||||
|
||||
// Props that affect more than just layout
|
||||
public static final String ENABLED = "enabled";
|
||||
public static final String BACKGROUND_COLOR = "backgroundColor";
|
||||
|
|
Загрузка…
Ссылка в новой задаче