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

Expose alignContent to react native

Browse Source 
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
This commit is contained in:
Emil Sjolander
2017-03-01 09:12:48 -08:00
committed by Facebook Github Bot
parent cc275557be
commit 31f848a5fa
8 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
View File

@@ -283,6 +283,16 @@ public class LayoutShadowNode extends ReactShadowNode {
alignItems.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.ALIGN_CONTENT)
public void setAlignContent(@Nullable String alignContent) {
if (isVirtual()) {
return;
}
setAlignContent(
alignContent == null ? YogaAlign.FLEX_START : YogaAlign.valueOf(
alignContent.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.JUSTIFY_CONTENT)
public void setJustifyContent(@Nullable String justifyContent) {
if (isVirtual()) {

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

@@ -650,6 +650,10 @@ public class ReactShadowNode {
mYogaNode.setAlignItems(alignItems);
}
public void setAlignContent(YogaAlign alignContent) {
mYogaNode.setAlignContent(alignContent);
}
public void setJustifyContent(YogaJustify justifyContent) {
mYogaNode.setJustifyContent(justifyContent);
}

2
ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View File

@@ -25,6 +25,7 @@ public class ViewProps {
// !!! Keep in sync with LAYOUT_ONLY_PROPS below
public static final String ALIGN_ITEMS = "alignItems";
public static final String ALIGN_SELF = "alignSelf";
public static final String ALIGN_CONTENT = "alignContent";
public static final String OVERFLOW = "overflow";
public static final String BOTTOM = "bottom";
public static final String COLLAPSABLE = "collapsable";
@@ -122,6 +123,7 @@ public class ViewProps {
FLEX_WRAP,
JUSTIFY_CONTENT,
OVERFLOW,
ALIGN_CONTENT,
/* position */
POSITION,