kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-24 04:25:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: correctly update layout on onLayout events

Browse Source
This commit is contained in:
Satyajit Sahoo
2019-12-03 20:32:38 +01:00
parent f271e299ac
commit eaf88478cc
2 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/stack/src/views/Header/HeaderSegment.tsx
View File

@@ -79,17 +79,20 @@ export default class HeaderSegment extends React.Component<Props, State> {
private handleTitleLayout = (e: LayoutChangeEvent) => {
const { height, width } = e.nativeEvent.layout;
const { titleLayout } = this.state;
if (
titleLayout &&
height === titleLayout.height &&
width === titleLayout.width
) {
return;
}
this.setState(({ titleLayout }) => {
if (
titleLayout &&
height === titleLayout.height &&
width === titleLayout.width
) {
return null;
}
this.setState({ titleLayout: { height, width } });
return {
titleLayout: { height, width },
};
});
};
private handleLeftLabelLayout = (e: LayoutChangeEvent) => {

58
packages/stack/src/views/Stack/Stack.tsx
View File

@@ -233,25 +233,24 @@ export default class Stack extends React.Component<Props, State> {
private handleLayout = (e: LayoutChangeEvent) => {
const { height, width } = e.nativeEvent.layout;
if (
height === this.state.layout.height &&
width === this.state.layout.width
) {
return;
}
const layout = { width, height };
this.setState(state => ({
layout,
floatingHeaderHeights: getFloatingHeaderHeights(
this.props.routes,
this.props.insets,
state.descriptors,
this.setState((state, props) => {
if (height === state.layout.height && width === state.layout.width) {
return null;
}
return {
layout,
{}
),
}));
floatingHeaderHeights: getFloatingHeaderHeights(
props.routes,
props.insets,
state.descriptors,
layout,
{}
),
};
});
};
private handleFloatingHeaderLayout = ({
@@ -261,23 +260,20 @@ export default class Stack extends React.Component<Props, State> {
route: Route<string>;
height: number;
}) => {
const previousHeight = this.state.floatingHeaderHeights[route.key];
this.setState(({ floatingHeaderHeights }) => {
const previousHeight = this.state.floatingHeaderHeights[route.key];
if (previousHeight && previousHeight === height) {
return;
}
if (previousHeight && previousHeight === height) {
return null;
}
// Update in next frame to make sure it's applied after screen's onLayout
requestAnimationFrame(() =>
requestAnimationFrame(() => {
this.setState(state => ({
floatingHeaderHeights: {
...state.floatingHeaderHeights,
[route.key]: height,
},
}));
})
);
return {
floatingHeaderHeights: {
...floatingHeaderHeights,
[route.key]: height,
},
};
});
};
private handleTransitionStart = (