Skip to content

Commit 23094db

Browse files
author
Eric Vicenti
committed
[ReactNative] JSNavigationStack rename routeMapper to renderSceneForRoute
1 parent 9a12b9c commit 23094db

6 files changed

Lines changed: 225 additions & 267 deletions

File tree

‎Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js‎

Lines changed: 89 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -71,101 +71,98 @@ var SampleNavigationBarRouteMapper = {
7171
}
7272
};
7373

74-
var SampleRouteMapper = {
74+
var _delay = 400; // Just to test for race conditions with native nav.
7575

76-
delay: 400, // Just to test for race conditions with native nav.
77-
78-
navigationItemForRoute: function(route, navigationOperations) {
79-
var content = route.content;
80-
return (
81-
<ScrollView>
82-
<View style={styles.scene}>
83-
<TouchableBounce
84-
onPress={this._pushRouteLater(navigationOperations.push)}>
85-
<View style={styles.button}>
86-
<Text style={styles.buttonText}>request push soon</Text>
87-
</View>
88-
</TouchableBounce>
89-
<TouchableBounce
90-
onPress={this._pushRouteLater(navigationOperations.replace)}>
91-
<View style={styles.button}>
92-
<Text>{content}</Text>
93-
</View>
94-
</TouchableBounce>
95-
<TouchableBounce
96-
onPress={this._pushRouteLater(navigationOperations.replace)}>
97-
<View style={styles.button}>
98-
<Text>{content}</Text>
99-
</View>
100-
</TouchableBounce>
101-
<TouchableBounce
102-
onPress={this._pushRouteLater(navigationOperations.replace)}>
103-
<View style={styles.button}>
104-
<Text>{content}</Text>
105-
</View>
106-
</TouchableBounce>
107-
<TouchableBounce
108-
onPress={this._pushRouteLater(navigationOperations.replace)}>
109-
<View style={styles.button}>
110-
<Text>{content}</Text>
111-
</View>
112-
</TouchableBounce>
113-
<TouchableBounce
114-
onPress={this._pushRouteLater(navigationOperations.replace)}>
115-
<View style={styles.button}>
116-
<Text>{content}</Text>
117-
</View>
118-
</TouchableBounce>
119-
<TouchableBounce
120-
onPress={this._popRouteLater(navigationOperations.pop)}>
121-
<View style={styles.button}>
122-
<Text style={styles.buttonText}>request pop soon</Text>
123-
</View>
124-
</TouchableBounce>
125-
<TouchableBounce
126-
onPress={
127-
this._immediatelySetTwoItemsLater(
128-
navigationOperations.immediatelyResetRouteStack
129-
)
130-
}>
131-
<View style={styles.button}>
132-
<Text style={styles.buttonText}>Immediate set two routes</Text>
133-
</View>
134-
</TouchableBounce>
135-
<TouchableBounce
136-
onPress={this._popToTopLater(navigationOperations.popToTop)}>
137-
<View style={styles.button}>
138-
<Text style={styles.buttonText}>pop to top soon</Text>
139-
</View>
140-
</TouchableBounce>
141-
</View>
142-
</ScrollView>
143-
);
144-
},
76+
var renderScene = function(route, navigationOperations) {
77+
var content = route.content;
78+
return (
79+
<ScrollView>
80+
<View style={styles.scene}>
81+
<TouchableBounce
82+
onPress={_pushRouteLater(navigationOperations.push)}>
83+
<View style={styles.button}>
84+
<Text style={styles.buttonText}>request push soon</Text>
85+
</View>
86+
</TouchableBounce>
87+
<TouchableBounce
88+
onPress={_pushRouteLater(navigationOperations.replace)}>
89+
<View style={styles.button}>
90+
<Text>{content}</Text>
91+
</View>
92+
</TouchableBounce>
93+
<TouchableBounce
94+
onPress={_pushRouteLater(navigationOperations.replace)}>
95+
<View style={styles.button}>
96+
<Text>{content}</Text>
97+
</View>
98+
</TouchableBounce>
99+
<TouchableBounce
100+
onPress={_pushRouteLater(navigationOperations.replace)}>
101+
<View style={styles.button}>
102+
<Text>{content}</Text>
103+
</View>
104+
</TouchableBounce>
105+
<TouchableBounce
106+
onPress={_pushRouteLater(navigationOperations.replace)}>
107+
<View style={styles.button}>
108+
<Text>{content}</Text>
109+
</View>
110+
</TouchableBounce>
111+
<TouchableBounce
112+
onPress={_pushRouteLater(navigationOperations.replace)}>
113+
<View style={styles.button}>
114+
<Text>{content}</Text>
115+
</View>
116+
</TouchableBounce>
117+
<TouchableBounce
118+
onPress={_popRouteLater(navigationOperations.pop)}>
119+
<View style={styles.button}>
120+
<Text style={styles.buttonText}>request pop soon</Text>
121+
</View>
122+
</TouchableBounce>
123+
<TouchableBounce
124+
onPress={
125+
_immediatelySetTwoItemsLater(
126+
navigationOperations.immediatelyResetRouteStack
127+
)
128+
}>
129+
<View style={styles.button}>
130+
<Text style={styles.buttonText}>Immediate set two routes</Text>
131+
</View>
132+
</TouchableBounce>
133+
<TouchableBounce
134+
onPress={_popToTopLater(navigationOperations.popToTop)}>
135+
<View style={styles.button}>
136+
<Text style={styles.buttonText}>pop to top soon</Text>
137+
</View>
138+
</TouchableBounce>
139+
</View>
140+
</ScrollView>
141+
);
142+
};
145143

146-
_popToTopLater: function(popToTop) {
147-
return () => setTimeout(popToTop, SampleRouteMapper.delay);
148-
},
144+
var _popToTopLater = function(popToTop) {
145+
return () => setTimeout(popToTop, _delay);
146+
};
149147

150-
_pushRouteLater: function(push) {
151-
return () => setTimeout(
152-
() => push(_getRandomRoute()),
153-
SampleRouteMapper.delay
154-
);
155-
},
148+
var _pushRouteLater = function(push) {
149+
return () => setTimeout(
150+
() => push(_getRandomRoute()),
151+
_delay
152+
);
153+
};
156154

157-
_immediatelySetTwoItemsLater: function(immediatelyResetRouteStack) {
158-
return () => setTimeout(
159-
() => immediatelyResetRouteStack([
160-
_getRandomRoute(),
161-
_getRandomRoute(),
162-
])
163-
);
164-
},
155+
var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
156+
return () => setTimeout(
157+
() => immediatelyResetRouteStack([
158+
_getRandomRoute(),
159+
_getRandomRoute(),
160+
])
161+
);
162+
};
165163

166-
_popRouteLater: function(pop) {
167-
return () => setTimeout(pop, SampleRouteMapper.delay);
168-
},
164+
var _popRouteLater = function(pop) {
165+
return () => setTimeout(pop, _delay);
169166
};
170167

171168
var BreadcrumbNavSample = React.createClass({
@@ -194,7 +191,7 @@ var BreadcrumbNavSample = React.createClass({
194191
debugOverlay={false}
195192
style={[styles.appContainer]}
196193
initialRoute={initialRoute}
197-
routeMapper={SampleRouteMapper}
194+
renderScene={renderScene}
198195
navigationBar={
199196
<BreadcrumbNavigationBar
200197
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
@@ -212,7 +209,7 @@ var BreadcrumbNavSample = React.createClass({
212209
debugOverlay={false}
213210
style={[styles.appContainer]}
214211
initialRoute={initialRoute}
215-
routeMapper={SampleRouteMapper}
212+
renderScene={renderScene}
216213
navigationBar={
217214
<BreadcrumbNavigationBar
218215
navigationBarRouteMapper={SampleNavigationBarRouteMapper}

‎Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ var TabBarExample = React.createClass({
4949
description: 'JS-implemented navigation',
5050
},
5151

52-
renderSceneForRoute: function(route, nav) {
52+
renderScene: function(route, nav) {
5353
switch (route.id) {
5454
case 'menu':
5555
return (
@@ -72,9 +72,7 @@ var TabBarExample = React.createClass({
7272
<JSNavigationStack
7373
style={styles.container}
7474
initialRoute={{ id: 'menu', }}
75-
routeMapper={{
76-
navigationItemForRoute: this.renderSceneForRoute,
77-
}}
75+
renderScene={this.renderScene}
7876
animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
7977
/>
8078
);

‎Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js‎

Lines changed: 76 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -27,84 +27,81 @@ var ROUTE_STACK = [
2727
_getRandomRoute(),
2828
_getRandomRoute(),
2929
];
30-
var SampleRouteMapper = {
31-
32-
navigationItemForRoute: function(route, navigationOperations) {
33-
return (
34-
<ScrollView style={styles.scene}>
35-
<View style={styles.scroll}>
36-
<Text>{route.randNumber}</Text>
37-
<TouchableBounce
38-
onPress={() => {
39-
navigationOperations.jumpBack();
40-
}}>
41-
<View style={styles.button}>
42-
<Text style={styles.buttonText}>jumpBack</Text>
43-
</View>
44-
</TouchableBounce>
45-
<TouchableBounce
46-
onPress={() => {
47-
navigationOperations.jumpForward();
48-
}}>
49-
<View style={styles.button}>
50-
<Text style={styles.buttonText}>jumpForward</Text>
51-
</View>
52-
</TouchableBounce>
53-
<TouchableBounce
54-
onPress={() => {
55-
navigationOperations.jumpTo(INIT_ROUTE);
56-
}}>
57-
<View style={styles.button}>
58-
<Text style={styles.buttonText}>jumpTo initial route</Text>
59-
</View>
60-
</TouchableBounce>
61-
<TouchableBounce
62-
onPress={() => {
63-
navigationOperations.push(_getRandomRoute());
64-
}}>
65-
<View style={styles.button}>
66-
<Text style={styles.buttonText}>destructive: push</Text>
67-
</View>
68-
</TouchableBounce>
69-
<TouchableBounce
70-
onPress={() => {
71-
navigationOperations.replace(_getRandomRoute());
72-
}}>
73-
<View style={styles.button}>
74-
<Text style={styles.buttonText}>destructive: replace</Text>
75-
</View>
76-
</TouchableBounce>
77-
<TouchableBounce
78-
onPress={() => {
79-
navigationOperations.pop();
80-
}}>
81-
<View style={styles.button}>
82-
<Text style={styles.buttonText}>destructive: pop</Text>
83-
</View>
84-
</TouchableBounce>
85-
<TouchableBounce
86-
onPress={() => {
87-
navigationOperations.immediatelyResetRouteStack([
88-
_getRandomRoute(),
89-
_getRandomRoute(),
90-
]);
91-
}}>
92-
<View style={styles.button}>
93-
<Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
94-
</View>
95-
</TouchableBounce>
96-
<TouchableBounce
97-
onPress={() => {
98-
navigationOperations.popToTop();
99-
}}>
100-
<View style={styles.button}>
101-
<Text style={styles.buttonText}>destructive: pop to top</Text>
102-
</View>
103-
</TouchableBounce>
104-
</View>
105-
</ScrollView>
106-
);
107-
},
30+
var renderScene = function(route, navigationOperations) {
31+
return (
32+
<ScrollView style={styles.scene}>
33+
<View style={styles.scroll}>
34+
<Text>{route.randNumber}</Text>
35+
<TouchableBounce
36+
onPress={() => {
37+
navigationOperations.jumpBack();
38+
}}>
39+
<View style={styles.button}>
40+
<Text style={styles.buttonText}>jumpBack</Text>
41+
</View>
42+
</TouchableBounce>
43+
<TouchableBounce
44+
onPress={() => {
45+
navigationOperations.jumpForward();
46+
}}>
47+
<View style={styles.button}>
48+
<Text style={styles.buttonText}>jumpForward</Text>
49+
</View>
50+
</TouchableBounce>
51+
<TouchableBounce
52+
onPress={() => {
53+
navigationOperations.jumpTo(INIT_ROUTE);
54+
}}>
55+
<View style={styles.button}>
56+
<Text style={styles.buttonText}>jumpTo initial route</Text>
57+
</View>
58+
</TouchableBounce>
59+
<TouchableBounce
60+
onPress={() => {
61+
navigationOperations.push(_getRandomRoute());
62+
}}>
63+
<View style={styles.button}>
64+
<Text style={styles.buttonText}>destructive: push</Text>
65+
</View>
66+
</TouchableBounce>
67+
<TouchableBounce
68+
onPress={() => {
69+
navigationOperations.replace(_getRandomRoute());
70+
}}>
71+
<View style={styles.button}>
72+
<Text style={styles.buttonText}>destructive: replace</Text>
73+
</View>
74+
</TouchableBounce>
75+
<TouchableBounce
76+
onPress={() => {
77+
navigationOperations.pop();
78+
}}>
79+
<View style={styles.button}>
80+
<Text style={styles.buttonText}>destructive: pop</Text>
81+
</View>
82+
</TouchableBounce>
83+
<TouchableBounce
84+
onPress={() => {
85+
navigationOperations.immediatelyResetRouteStack([
86+
_getRandomRoute(),
87+
_getRandomRoute(),
88+
]);
89+
}}>
90+
<View style={styles.button}>
91+
<Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
92+
</View>
93+
</TouchableBounce>
94+
<TouchableBounce
95+
onPress={() => {
96+
navigationOperations.popToTop();
97+
}}>
98+
<View style={styles.button}>
99+
<Text style={styles.buttonText}>destructive: pop to top</Text>
100+
</View>
101+
</TouchableBounce>
102+
</View>
103+
</ScrollView>
104+
);
108105
};
109106

110107
class JumpingNavBar extends React.Component {
@@ -140,7 +137,7 @@ var JumpingNavSample = React.createClass({
140137
style={[styles.appContainer]}
141138
initialRoute={INIT_ROUTE}
142139
initialRouteStack={ROUTE_STACK}
143-
routeMapper={SampleRouteMapper}
140+
renderScene={renderScene}
144141
navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
145142
shouldJumpOnBackstackPop={true}
146143
/>

0 commit comments

Comments
 (0)