mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Summary: Developers are complaining about horrible lag (https://github.com/facebook/react-native/issues/11809) caused by PR https://github.com/facebook/react-native/pull/11222. The issue was that hasNewLayout in yoga is actually a dirty bit and indicates that either you OR one of your children has a new layout. We still need to manually check whether the component's layout actually is different from before. Reviewed By: sahrens Differential Revision: D4597545 fbshipit-source-id: 27d4605afd00badfdcdacae740ee2e477adee929
76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule LayoutEventsTestApp
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
var React = require('React');
|
|
var View = require('View');
|
|
|
|
var RecordingModule = require('NativeModules').Recording;
|
|
|
|
const LAYOUT_SPECS = [
|
|
[10, 10, 100, 100],
|
|
[10, 10, 50, 50],
|
|
[0, 0, 50, 50],
|
|
[0, 0, 50, 50],
|
|
];
|
|
|
|
class LayoutEventsTestApp extends React.Component {
|
|
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
specNumber: 0,
|
|
};
|
|
this.numParentLayouts = 0;
|
|
}
|
|
|
|
handleOnLayout = (e) => {
|
|
var layout = e.nativeEvent.layout;
|
|
RecordingModule.record(layout.x + ',' + layout.y + '-' + layout.width + 'x' + layout.height);
|
|
|
|
if (this.state.specNumber >= LAYOUT_SPECS.length) {
|
|
// This will cause the test to fail
|
|
RecordingModule.record('Got an extraneous layout call');
|
|
} else {
|
|
this.setState({
|
|
specNumber: this.state.specNumber + 1,
|
|
});
|
|
}
|
|
};
|
|
|
|
handleParentOnLayout = (e) => {
|
|
if (this.numParentLayouts > 0) {
|
|
// This will cause the test to fail - the parent's layout doesn't change
|
|
// so we should only get the event once.
|
|
RecordingModule.record('Got an extraneous layout call on the parent');
|
|
}
|
|
this.numParentLayouts++;
|
|
};
|
|
|
|
render() {
|
|
const layout = LAYOUT_SPECS[this.state.specNumber];
|
|
return (
|
|
<View
|
|
onLayout={this.handleParentOnLayout}
|
|
testID="parent"
|
|
style={{left: 0, top: 0, width: 500, height: 500}}>
|
|
<View
|
|
onLayout={this.handleOnLayout}
|
|
testID="container"
|
|
style={{left: layout[0], top: layout[1], width: layout[2], height: layout[3]}}/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = LayoutEventsTestApp;
|