mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-26 07:04:05 +08:00
[React Native] Remove layout-only nodes
Summary: Remove layout-only views. Works by checking properties against a list of known properties that only affect layout. The `RCTShadowView` hierarchy still has a 1:1 correlation with the JS nodes. This works by adjusting the tags and indices in `manageChildren`. For example, if JS told us to insert tag 1 at index 0 and tag 1 is layout-only with children whose tags are 2 and 3, we adjust it so we insert tags 2 and 3 at indices 0 and 1. This keeps changes out of `RCTView` and `RCTScrollView`. In order to simplify this logic, view moves are now processed as view removals followed by additions. A move from index 0 to 1 is recorded as a removal of view at indices 0 and 1 and an insertion of tags 1 and 2 at indices 0 and 1. Of course, the remaining indices have to be offset to take account for this. The `collapsible` attribute is a bit of a hack to force `RCTScrollView` to always have one child. This was easier than rethinking out the logic there, but we could change this later. @public Test Plan: There are tests in `RCTUIManagerTests.m` that test the tag- and index-manipulation logic works. There are various scenarios including add-only, remove-only, and move. In addition, two scenario tests verify that the optimization works by checking the number of views and shadow views after various situations happen.
This commit is contained in:
@@ -279,6 +279,7 @@ var ScrollView = React.createClass({
|
||||
|
||||
var contentContainer =
|
||||
<View
|
||||
collapsible={false}
|
||||
ref={INNERVIEW}
|
||||
style={contentContainerStyle}
|
||||
removeClippedSubviews={this.props.removeClippedSubviews}>
|
||||
|
||||
@@ -77,6 +77,12 @@ var View = React.createClass({
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
/**
|
||||
* When false, indicates that the view should not be collapsed, even if it is
|
||||
* layout-only. Defaults to true.
|
||||
*/
|
||||
collapsible: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* When true, indicates that the view is an accessibility element. By default,
|
||||
* all the touchable elements are accessible.
|
||||
|
||||
Reference in New Issue
Block a user