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

Remove screen tracking without redux (#449)

Browse Source 
This is a hack and we shouldn't put it in official documentation.
This commit is contained in:
Satyajit Sahoo
2017-02-23 15:10:40 +05:30
committed by Mike Grabowski
parent 423aa85354
commit e0c1c95e6f
1 changed files with 5 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/guides/Screen-Tracking.md
View File

@@ -2,35 +2,9 @@
This example shows how to do screen tracking and send to Google Analytics. The approach can be adapted to any other mobile analytics SDK.
### Use componentDidUpdate hook
### Screen tracking with Redux
`componentDidUpdate` has access the previous and current navigation state and its a good place to do screen tracking.
```js
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
const screenName = (navState) => {
return navState ? navState.routes[navState.index].routeName : void 0;
};
const AppNavigator = StackNavigator(AppRouteConfigs);
AppNavigator.prototype.componentDidUpdate = function(prevProps, prevState) {
const currScreen = screenName(this.state.nav);
const prevScreen = screenName(prevState.nav);
if (!!currScreen && currScreen != prevScreen) {
// the line below uses the Google Analytics tracker
// change the tracker here to use other Mobile analytics SDK.
tracker.trackScreenView(currScreen);
}
}
```
### Use Redux
When using Redux, `screenTracking` can be written as a Redux middleware.
When using Redux, we can write a Redux middleware to track the screen.
```js
import { NavigationActions } from 'react-navigation';
@@ -39,8 +13,8 @@ import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
// gets the current screen from navigation state
function getCurrentScreen(getStateFn) {
const navigationState = getStateFn().nav;
function getCurrentScreen(getState) {
const navigationState = getState().navigation;
if (!navigationState) { return null; }
return navigationState.routes[navigationState.index].routeName;
}
@@ -69,7 +43,7 @@ The `screenTracking` middleware can be applied to the store during its creation.
```js
const store = createStore(
combineReducers({
nav: navReducer,
navigation: navigationReducer,
...
}),
applyMiddleware(