Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 242a78c

Browse files
Merge branch 'docs' into 0.7.0
2 parents a637317 + c5ec57a commit 242a78c

File tree

3 files changed

+134
-10
lines changed

3 files changed

+134
-10
lines changed

‎README.md‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ The **`<Router />`** object used to initialize the navigation can take the follo
100100
- `firstRoute` (required): A React class corresponding to the first page of your navigation
101101
- `headerStyle`: Apply a StyleSheet to the navigation bar. You'll probably want to change the backgroundColor for example.
102102
- `titleStyle`: Apply a StyleSheet to the navigation bar titles. Useful for changing the font or text color.
103+
- `bgStyle` Apply a StyleSheet to the background of all routes.
104+
- `statusBarColor`: Specify the string `black` if you want the statusbar to be dark in color, or leave unspecified for a `light-content` style. Refer to StatusBarIOS for details.
103105
- `borderBottomWidth`: Apply a bottom border to your navbar.
104106
- `borderColor`: Apply a border color to your bottom border.
105107
- `backButtonComponent`: By default, the navigation bar will display a simple "Back" text for the back button. To change this, you can specify your own backButton component (like in the Twitter app).
@@ -108,6 +110,7 @@ The **`<Router />`** object used to initialize the navigation can take the follo
108110
- `hideNavigationBar`: Hide the navigation bar, always
109111
- `handleBackAndroid` (Boolean value): Apply a listener to the native back button on Android. On click, it will go to the previous route until it reach the first scene, then it will exit the app.
110112

113+
111114
The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript object) which can have the following keys:
112115
- `name`: The name of your route, which will be shown as the title of the navigation bar unless it is changed.
113116
- `component` (required): The React class corresponding to the view you want to render.
@@ -145,13 +148,26 @@ The functions **`this.props.setRightProps`**, **`this.props.setLeftProps`** and
145148
- This allows you to talk directly to your navbar, because previously you could only talk to it when navigating forward or backward.
146149

147150

148-
Events emitted by the router:
149-
`didFocus`, emits route name
150-
You can add a listener to a component as such:
151+
As of 0.7.0 the router acts as a relay for events emitted by the navigator, and extends these to the following list:
152+
153+
`willFocus`: Emitted when a route will focus. Emits the route name as a string.
154+
`didFocus`: Emitted when a route did focus. Emits the route name as a string.
155+
`willPop`: Emitted when a route stack will be popped. Triggered by `Navigator.pop();`
156+
`didPop`: Emitted when a route stack did pop. Triggered by `Navigator.pop();`
157+
`willPush`: Emitted when a new route will be pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
158+
`didPush`: Emitted when a new route has been pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
159+
`willResetTo`: Emitted when the route stack will be reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
160+
`didResetTo`: Emitted when the route stack has been reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
161+
`willReplace`: Emitted when a route will replace the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
162+
`didReplace`: Emitted when a route has replaced the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
163+
`willPopToTop`: Emitted when the route stack will be popped to the top. Triggered by `Navigator.popToTop();`
164+
`didPopToTop`: Emitted when the route stack has been popped to the top. Triggered by `Navigator.popToTop();`
165+
166+
You can listen to these events by adding an event listener as such:
151167

152168
```javascript
153169
this.props.routeEmitter.addListener('didFocus', (name) => {
154-
//Check if name is the current component, and if it is, act on this focus event.
170+
//Do something with name..
155171
});
156172
```
157173

‎index.js‎

Lines changed: 110 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
1212

1313
import NavBarContainer from './components/NavBarContainer';
1414
import * as Styles from './styles';
15+
import aspect from 'aspect-js';
1516

1617
const propTypes = {
1718
backButtonComponent: PropTypes.func,
@@ -44,9 +45,25 @@ class Router extends React.Component {
4445
this.onBack = this.onBack.bind(this);
4546
this.customAction = this.customAction.bind(this);
4647
this.renderScene = this.renderScene.bind(this);
48+
4749
this.onDidFocus = this.onDidFocus.bind(this);
4850
this.onWillFocus = this.onWillFocus.bind(this);
4951

52+
this.onWillPop = this.onWillPop.bind(this);
53+
this.onDidPop = this.onDidPop.bind(this);
54+
55+
this.onWillPush = this.onWillPush.bind(this);
56+
this.onDidPush = this.onDidPush.bind(this);
57+
58+
this.onWillResetTo = this.onWillResetTo.bind(this);
59+
this.onDidResetTo = this.onDidResetTo.bind(this);
60+
61+
this.onWillReplace = this.onWillReplace.bind(this);
62+
this.onDidReplace = this.onDidReplace.bind(this);
63+
64+
this.onWillPopToTop = this.onWillPopToTop.bind(this);
65+
this.onDidPopToTop = this.onDidPopToTop.bind(this);
66+
5067
this.state = {
5168
route: {
5269
name: null,
@@ -56,6 +73,57 @@ class Router extends React.Component {
5673
this.emitter = new EventEmitter();
5774
}
5875

76+
componentDidMount() {
77+
this.refs.navigator.navigationContext.addListener('willfocus', (event) => {
78+
const route = event.data.route;
79+
this.setState({ route });
80+
this.emitter.emit('willFocus', route.name);
81+
});
82+
83+
this.refs.navigator.navigationContext.addListener('didfocus', (event) => {
84+
const route = event.data.route;
85+
this.emitter.emit('didFocus', route.name);
86+
});
87+
88+
aspect.before(this.refs.navigator, 'pop', () => {
89+
this.onWillPop();
90+
});
91+
aspect.after(this.refs.navigator, 'pop', () => {
92+
this.onDidPop();
93+
});
94+
95+
aspect.before(this.refs.navigator, 'push', (route) => {
96+
this.onWillPush(route);
97+
});
98+
aspect.after(this.refs.navigator, 'push', (route) => {
99+
//temporary hack to fix bug in aspect library
100+
this.onDidPush(route || arguments[1]);
101+
});
102+
103+
aspect.before(this.refs.navigator, 'resetTo', (route) => {
104+
this.onWillResetTo(route);
105+
});
106+
aspect.after(this.refs.navigator, 'resetTo', (route) => {
107+
//temporary hack to fix bug in aspect library
108+
this.onDidResetTo(route || arguments[1]);
109+
});
110+
111+
aspect.before(this.refs.navigator, 'replace', (route) => {
112+
this.onWillReplace(route);
113+
});
114+
aspect.after(this.refs.navigator, 'replace', (route) => {
115+
//temporary hack to fix bug in aspect library
116+
this.onDidReplace(route || arguments[1]);
117+
});
118+
119+
aspect.before(this.refs.navigator, 'popToTop', () => {
120+
this.onWillPopToTop();
121+
});
122+
aspect.after(this.refs.navigator, 'popToTop', () => {
123+
this.onDidPopToTop();
124+
});
125+
}
126+
59127
onWillFocus(route) {
60128
this.setState({ route });
61129
this.emitter.emit('willFocus', route.name);
@@ -68,15 +136,53 @@ class Router extends React.Component {
68136
onBack(navigator) {
69137
if (this.state.route.index > 0) {
70138
navigator.pop();
71-
this.emitter.emit('pop');
72139
}
73140
}
74141

75142
onForward(nextRoute, navigator) {
76143
navigator.push(
77144
Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
78145
);
79-
this.emitter.emit('push', nextRoute);
146+
}
147+
148+
onWillPop() {
149+
this.emitter.emit('willPop');
150+
}
151+
152+
onDidPop() {
153+
this.emitter.emit('didPop');
154+
}
155+
156+
onWillPush(route) {
157+
this.emitter.emit('willPush', route);
158+
}
159+
160+
onDidPush(route) {
161+
this.emitter.emit('didPush', route);
162+
}
163+
164+
onWillResetTo(route) {
165+
this.emitter.emit('willResetTo', route);
166+
}
167+
168+
onDidResetTo(route) {
169+
this.emitter.emit('didResetTo', route);
170+
}
171+
172+
onWillReplace(route) {
173+
this.emitter.emit('willReplace', route);
174+
}
175+
176+
onDidReplace(route) {
177+
this.emitter.emit('didReplace', route);
178+
}
179+
180+
onWillPopToTop() {
181+
this.emitter.emit('willPopToTop');
182+
}
183+
184+
onDidPopToTop() {
185+
this.emitter.emit('didPopToTop');
80186
}
81187

82188
setRightProps(props) {
@@ -192,9 +298,9 @@ class Router extends React.Component {
192298
// Status bar color
193299
if (Platform.OS === 'ios') {
194300
if (this.props.statusBarColor === 'black') {
195-
StatusBarIOS.setStyle(0);
301+
StatusBarIOS.setStyle(0);// "Default" style according to StatusBarIOS.js
196302
} else {
197-
StatusBarIOS.setStyle(1);
303+
StatusBarIOS.setStyle(1);// "light-content" style according to StatusBarIOS.js
198304
}
199305
} else if (Platform.OS === 'android') {
200306
// no android version yet
@@ -228,8 +334,6 @@ class Router extends React.Component {
228334
initialRoute={this.props.firstRoute}
229335
navigationBar={navigationBar}
230336
renderScene={this.renderScene}
231-
onDidFocus={this.onDidFocus}
232-
onWillFocus={this.onWillFocus}
233337
configureScene={this.configureScene}
234338
/>
235339
);

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"author": "Tristan Edwards <tristan.edwards@me.com> (http://tristanedwards.me)",
66
"contributors": [
77
"Mikael Carpenter",
8+
"Nicolas Charpentier",
89
"David Leonardi"
910
],
1011
"main": "index.js",
@@ -31,6 +32,9 @@
3132
"url": "https://github.com/react-native-simple-router-community/react-native-simple-router/issues"
3233
},
3334
"homepage": "https://github.com/react-native-simple-router-community/react-native-simple-router",
35+
"dependencies": {
36+
"aspect-js": "^1.0.3"
37+
},
3438
"peerDependencies": {
3539
"react-native": ">=0.12.0 || 0.5.0-rc1 || 0.6.0-rc || 0.7.0-rc || 0.7.0-rc.2 || 0.8.0-rc || 0.8.0-rc.2 || 0.9.0-rc || 0.10.0-rc || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc || 0.14.0-rc || 0.15.0-rc || 0.16.0-rc || 0.17.0-rc || 0.18.0-rc || 0.19.0-rc || 0.20.0-rc || 0.20.0-rc1"
3640
},

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /