kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-11 22:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use Header.HEIGHT instead of measuring to avoid flicker (#3940)

Browse Source
This commit is contained in:
Janic Duplessis
2018-04-09 15:31:43 -04:00
parent cc4d75f1a8
commit 785af36335
3 changed files with 4 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
View File

@@ -77,7 +77,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
</View>
<View
collapsable={undefined}
onLayout={[Function]}
style={
Object {
"transform": Array [
@@ -278,7 +277,6 @@ exports[`StackNavigator renders successfully 1`] = `
</View>
<View
collapsable={undefined}
onLayout={[Function]}
style={
Object {
"transform": Array [

11
packages/react-navigation/src/views/Header/Header.js vendored
View File

@@ -47,12 +47,6 @@ class Header extends React.PureComponent {
widths: {},
};
_handleOnLayout = e => {
if (typeof this.props.onLayout === 'function') {
this.props.onLayout(e.nativeEvent.layout);
}
};
_getHeaderTitleString(scene) {
const options = scene.descriptor.options;
if (typeof options.headerTitle === 'string') {
@@ -494,10 +488,7 @@ class Header extends React.PureComponent {
const forceInset = headerForceInset || { top: 'always', bottom: 'never' };
return (
<Animated.View
style={this.props.layoutInterpolator(this.props)}
onLayout={this._handleOnLayout}
>
<Animated.View style={this.props.layoutInterpolator(this.props)}>
<SafeAreaView forceInset={forceInset} style={containerStyles}>
<View style={StyleSheet.absoluteFill}>
{options.headerBackground}

10
packages/react-navigation/src/views/StackView/StackViewLayout.js vendored
View File

@@ -94,11 +94,7 @@ class StackViewLayout extends React.Component {
}
// Handle the case where the header option is a function, and provide the default
const renderHeader =
header ||
(props => (
<Header onLayout={layout => (this._headerLayout = layout)} {...props} />
));
const renderHeader = header || (props => <Header {...props} />);
const {
headerLeftInterpolator,
@@ -453,8 +449,8 @@ class StackViewLayout extends React.Component {
const hasHeader = options.header !== null;
const headerMode = this._getHeaderMode();
let marginTop = 0;
if (!hasHeader && headerMode === 'float' && this._headerLayout) {
marginTop = -this._headerLayout.height;
if (!hasHeader && headerMode === 'float') {
marginTop = -Header.HEIGHT;
}
return (