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

Add display:none support to react native

Browse Source 
Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a
This commit is contained in:
Emil Sjolander
2017-03-01 09:12:50 -08:00
committed by Facebook Github Bot
parent 31f848a5fa
commit 4d69f4b2d1
9 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Libraries/StyleSheet/LayoutPropTypes.js
View File

@@ -27,6 +27,13 @@ var ReactPropTypes = require('React').PropTypes;
* algorithm and affect the positioning and sizing of views.
*/
var LayoutPropTypes = {
/** `display` sets the display type of this component.
*
* It works similarly to `display` in CSS, but only support 'flex' and 'none'.
* 'flex' is the default.
*/
display: ReactPropTypes.string,
/** `width` sets the width of this component.
*
* It works similarly to `width` in CSS, but in React Native you