X Tutup
Skip to content

Commit 62e80a6

Browse files
Hedger WangFacebook Github Bot 9
Hedger Wang
authored and
Facebook Github Bot 9
committed
Refactor <NavigationHeader /> API.
Summary:- All the public sub component renderers should implement the interface NavigationSceneRenderer, which will help to reuse renderer or replace renders for different composition. - Perf improvement. <NavigationHeader /> is rendering way more sub component than necessary, we shall fix that. - No UI or behavior change. Reviewed By: ericvicenti Differential Revision: D3091442 fb-gh-sync-id: fba5f7ce74597fa6036b5b216c02b06052801983 shipit-source-id: fba5f7ce74597fa6036b5b216c02b06052801983
1 parent 433fb33 commit 62e80a6

File tree

7 files changed

+318
-162
lines changed

7 files changed

+318
-162
lines changed

‎Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,11 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
5858

5959
class NavigationAnimatedExample extends React.Component {
6060
componentWillMount() {
61-
this._renderNavigation = this._renderNavigation.bind(this);
6261
this._renderCard = this._renderCard.bind(this);
63-
this._renderScene = this._renderScene.bind(this);
6462
this._renderHeader = this._renderHeader.bind(this);
63+
this._renderNavigation = this._renderNavigation.bind(this);
64+
this._renderScene = this._renderScene.bind(this);
65+
this._renderTitleComponent = this._renderTitleComponent.bind(this);
6566
}
6667
render() {
6768
return (
@@ -99,14 +100,20 @@ class NavigationAnimatedExample extends React.Component {
99100
_renderHeader(/*NavigationSceneRendererProps*/ props) {
100101
return (
101102
<NavigationHeader
102-
navigationProps={props}
103-
renderTitleComponent={(navigationProps, scene) => {
104-
return <NavigationHeader.Title>{scene.navigationState.key}</NavigationHeader.Title>;
105-
}}
103+
{...props}
104+
renderTitleComponent={this._renderTitleComponent}
106105
/>
107106
);
108107
}
109108

109+
_renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
110+
return (
111+
<NavigationHeader.Title>
112+
{props.scene.navigationState.key}
113+
</NavigationHeader.Title>
114+
);
115+
}
116+
110117
_renderCard(/*NavigationSceneRendererProps*/ props) {
111118
return (
112119
<NavigationCard

‎Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
/**
2+
* Copyright (c) 2013-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
29
* The examples provided by Facebook are for non-commercial testing and
310
* evaluation purposes only.
411
*
@@ -139,7 +146,7 @@ const ExampleAppReducer = NavigationReducer.TabsReducer({
139146
],
140147
});
141148

142-
function stateTypeTitleMap(pageState) {
149+
function stateTypeTitleMap(pageState: any) {
143150
switch (pageState.type) {
144151
case 'ProfilePage':
145152
return 'Profile Page';
@@ -177,14 +184,20 @@ class ExampleTabScreen extends React.Component {
177184
_renderHeader(props: NavigationSceneRendererProps) {
178185
return (
179186
<NavigationHeader
180-
navigationProps={props}
181-
renderTitleComponent={(navigationProps, scene) => {
182-
return <NavigationHeader.Title>{stateTypeTitleMap(scene.navigationState)}</NavigationHeader.Title>;
183-
}}
187+
{...props}
188+
renderTitleComponent={this._renderTitleComponent}
184189
/>
185190
);
186191
}
187192

193+
_renderTitleComponent(props: NavigationSceneRendererProps) {
194+
return (
195+
<NavigationHeader.Title>
196+
{stateTypeTitleMap(props.scene.navigationState)}
197+
</NavigationHeader.Title>
198+
);
199+
}
200+
188201
_renderScene(props: NavigationSceneRendererProps) {
189202
const {onNavigate} = props;
190203
return (

‎Examples/UIExplorer/UIExplorerApp.ios.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
/**
2+
* Copyright (c) 2013-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
29
* The examples provided by Facebook are for non-commercial testing and
310
* evaluation purposes only.
411
*
@@ -77,10 +84,12 @@ class UIExplorerApp extends React.Component {
7784
_renderOverlay: Function;
7885
_renderScene: Function;
7986
_renderCard: Function;
87+
_renderTitleComponent: Function;
8088
componentWillMount() {
8189
this._renderNavigation = this._renderNavigation.bind(this);
8290
this._renderOverlay = this._renderOverlay.bind(this);
8391
this._renderScene = this._renderScene.bind(this);
92+
this._renderTitleComponent = this._renderTitleComponent.bind(this);
8493
}
8594
render() {
8695
return (
@@ -121,15 +130,20 @@ class UIExplorerApp extends React.Component {
121130
_renderOverlay(props: NavigationSceneRendererProps): ReactElement {
122131
return (
123132
<NavigationHeader
124-
key={'header_' + props.scene.navigationState.key}
125-
navigationProps={props}
126-
renderTitleComponent={(navigationProps, scene) => {
127-
return <NavigationHeader.Title>{UIExplorerStateTitleMap(scene.navigationState)}</NavigationHeader.Title>;
128-
}}
133+
{...props}
134+
renderTitleComponent={this._renderTitleComponent}
129135
/>
130136
);
131137
}
132138

139+
_renderTitleComponent(props: NavigationSceneRendererProps): ReactElement {
140+
return (
141+
<NavigationHeader.Title>
142+
{UIExplorerStateTitleMap(props.scene.navigationState)}
143+
</NavigationHeader.Title>
144+
);
145+
}
146+
133147
_renderScene(props: NavigationSceneRendererProps): ?ReactElement {
134148
const state = props.scene.navigationState;
135149
if (state.key === 'AppList') {

0 commit comments

Comments
 (0)
X Tutup