kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-02 06:45:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add percentage support to react native

Browse Source 
Summary:
Adds support for percentage value in react native.

syntax: property: 100 | property | '100%'

supported properties:
padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc
This commit is contained in:
Emil Sjolander
2017-01-11 03:58:03 -08:00
committed by Facebook Github Bot
parent 00d5674474
commit 3f49e743be
16 changed files with 567 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java
View File

@@ -11,6 +11,7 @@ package com.facebook.react.uimanager;
import javax.annotation.Nullable;
import java.util.Arrays;
import java.util.ArrayList;
import com.facebook.yoga.YogaAlign;
@@ -23,6 +24,7 @@ import com.facebook.yoga.YogaMeasureFunction;
import com.facebook.yoga.YogaNode;
import com.facebook.yoga.YogaOverflow;
import com.facebook.yoga.YogaPositionType;
import com.facebook.yoga.YogaValue;
import com.facebook.yoga.YogaWrap;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.uimanager.annotations.ReactPropertyHolder;
@@ -72,7 +74,8 @@ public class ReactShadowNode {
private float mAbsoluteRight;
private float mAbsoluteBottom;
private final Spacing mDefaultPadding = new Spacing(0);
private final Spacing mPadding = new Spacing(YogaConstants.UNDEFINED);
private final float[] mPadding = new float[Spacing.ALL + 1];
private final boolean[] mPaddingIsPercent = new boolean[Spacing.ALL + 1];
private final YogaNode mYogaNode;
public ReactShadowNode() {
@@ -82,6 +85,7 @@ public class ReactShadowNode {
node = new YogaNode();
}
mYogaNode = node;
Arrays.fill(mPadding, YogaConstants.UNDEFINED);
} else {
mYogaNode = null;
}
@@ -514,38 +518,62 @@ public class ReactShadowNode {
mYogaNode.setDirection(direction);
}
public final float getStyleWidth() {
return mYogaNode.getWidth().value;
public final YogaValue getStyleWidth() {
return mYogaNode.getWidth();
}
public void setStyleWidth(float widthPx) {
mYogaNode.setWidth(widthPx);
}
public void setStyleWidthPercent(float percent) {
mYogaNode.setWidthPercent(percent);
}
public void setStyleMinWidth(float widthPx) {
mYogaNode.setMinWidth(widthPx);
}
public void setStyleMinWidthPercent(float percent) {
mYogaNode.setMinWidthPercent(percent);
}
public void setStyleMaxWidth(float widthPx) {
mYogaNode.setMaxWidth(widthPx);
}
public final float getStyleHeight() {
return mYogaNode.getHeight().value;
public void setStyleMaxWidthPercent(float percent) {
mYogaNode.setMaxWidthPercent(percent);
}
public final YogaValue getStyleHeight() {
return mYogaNode.getHeight();
}
public void setStyleHeight(float heightPx) {
mYogaNode.setHeight(heightPx);
}
public void setStyleHeightPercent(float percent) {
mYogaNode.setHeightPercent(percent);
}
public void setStyleMinHeight(float widthPx) {
mYogaNode.setMinHeight(widthPx);
}
public void setStyleMinHeightPercent(float percent) {
mYogaNode.setMinHeightPercent(percent);
}
public void setStyleMaxHeight(float widthPx) {
mYogaNode.setMaxHeight(widthPx);
}
public void setStyleMaxHeightPercent(float percent) {
mYogaNode.setMaxHeightPercent(percent);
}
public void setFlex(float flex) {
mYogaNode.setFlex(flex);
}
@@ -562,6 +590,10 @@ public class ReactShadowNode {
mYogaNode.setFlexBasis(flexBasis);
}
public void setFlexBasisPercent(float percent) {
mYogaNode.setFlexBasisPercent(percent);
}
public void setStyleAspectRatio(float aspectRatio) {
mYogaNode.setAspectRatio(aspectRatio);
}
@@ -594,12 +626,16 @@ public class ReactShadowNode {
mYogaNode.setMargin(YogaEdge.fromInt(spacingType), margin);
}
public void setMarginPercent(int spacingType, float percent) {
mYogaNode.setMarginPercent(YogaEdge.fromInt(spacingType), percent);
}
public final float getPadding(int spacingType) {
return mYogaNode.getLayoutPadding(YogaEdge.fromInt(spacingType));
}
public final float getStylePadding(int spacingType) {
return mYogaNode.getPadding(YogaEdge.fromInt(spacingType)).value;
public final YogaValue getStylePadding(int spacingType) {
return mYogaNode.getPadding(YogaEdge.fromInt(spacingType));
}
public void setDefaultPadding(int spacingType, float padding) {
@@ -608,7 +644,14 @@ public class ReactShadowNode {
}
public void setPadding(int spacingType, float padding) {
mPadding.set(spacingType, padding);
mPadding[spacingType] = padding;
mPaddingIsPercent[spacingType] = false;
updatePadding();
}
public void setPaddingPercent(int spacingType, float percent) {
mPadding[spacingType] = percent;
mPaddingIsPercent[spacingType] = !YogaConstants.isUndefined(percent);
updatePadding();
}
@@ -618,28 +661,31 @@ public class ReactShadowNode {
spacingType == Spacing.RIGHT ||
spacingType == Spacing.START ||
spacingType == Spacing.END) {
if (YogaConstants.isUndefined(mPadding.getRaw(spacingType)) &&
YogaConstants.isUndefined(mPadding.getRaw(Spacing.HORIZONTAL)) &&
YogaConstants.isUndefined(mPadding.getRaw(Spacing.ALL))) {
if (YogaConstants.isUndefined(mPadding[spacingType]) &&
YogaConstants.isUndefined(mPadding[Spacing.HORIZONTAL]) &&
YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
} else {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
continue;
}
} else if (spacingType == Spacing.TOP || spacingType == Spacing.BOTTOM) {
if (YogaConstants.isUndefined(mPadding.getRaw(spacingType)) &&
YogaConstants.isUndefined(mPadding.getRaw(Spacing.VERTICAL)) &&
YogaConstants.isUndefined(mPadding.getRaw(Spacing.ALL))) {
if (YogaConstants.isUndefined(mPadding[spacingType]) &&
YogaConstants.isUndefined(mPadding[Spacing.VERTICAL]) &&
YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
} else {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
continue;
}
} else {
if (YogaConstants.isUndefined(mPadding.getRaw(spacingType))) {
if (YogaConstants.isUndefined(mPadding[spacingType])) {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
} else {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
continue;
}
}
if (mPaddingIsPercent[spacingType]) {
mYogaNode.setPaddingPercent(YogaEdge.fromInt(spacingType), mPadding[spacingType]);
} else {
mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding[spacingType]);
}
}
}
@@ -651,6 +697,10 @@ public class ReactShadowNode {
mYogaNode.setPosition(YogaEdge.fromInt(spacingType), position);
}
public void setPositionPercent(int spacingType, float percent) {
mYogaNode.setPositionPercent(YogaEdge.fromInt(spacingType), percent);
}
public void setPositionType(YogaPositionType positionType) {
mYogaNode.setPositionType(positionType);
}