Disable console log in navigation mode

Question

I use the navigation reaction to develop my application. When I run log-android, it writes something like this.

Navigation Dispatch: Action: {...}, New Status: {...}

which is in the line createNavigationContainer.js 150.

I went through github and the document said that this can be done by setting onNavigationStateChange = {null} to the top-level navigator.

How can I achieve this by setting onNavigationStateChange = {null} and where to install it?

I am trying to install as shown below, but it will not be able to redirect to another page.

export default () => { <App onNavigationStateChange={null} /> } 

Below is my app.js code

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import { StackNavigator,DrawerNavigator } from 'react-navigation'; import DrawerContent from './components/drawer/drawerContent.js'; import News from './components/news/home.js'; const drawNavigation = DrawerNavigator( { Home : { screen : News , navigationOptions : { header : null } } }, { contentComponent: props => <DrawerContent {...props} /> } ) const StackNavigation = StackNavigator({ Home : { screen : drawNavigation, navigationOptions: { header: null } } }); export default StackNavigation; 

This is my drawerContent.js

 import React, {Component} from 'react' import {View,Text, StyleSheet, TouchableNativeFeedback, TouchableOpacity, TouchableHighlight } from 'react-native' import { DrawerItems, DrawerView } from 'react-navigation'; import Icon from 'react-native-vector-icons/Octicons'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; class DrawerContent extends Component { constructor(props){ super(props); console.log('DrawerContent|testtttttt'); } render(){ return ( <View style={styles.container}> <Text>Hi darren</Text> <TouchableOpacity style={{ marginBottom:5 }} onPress={() => this.props.navigation.navigate('RegistrationScreen') } > <View style={styles.nonIconButton}> <Text style={{ color: 'black',fontSize: 13 }} >Sign Up</Text> </View> </TouchableOpacity> <Text>Hi darren</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, }); export default DrawerContent; 

Answer 1

First, make sure you use the latest version of react-navigation as a comment, noting that the fix was fixed , quite recently.

According to your sample code, in order to disable logging for all navigation state changes, you will want to replace this code:

 export default StackNavigation; 

with:

 export default () => ( <StackNavigation onNavigationStateChange={null} /> ); 

how StackNavigation appears to be your root navigator.

Answer 2

Real navigation is great, but this magazine is really bad. Decision

 const AppNavigator = StackNavigator(SomeAppRouteConfigs); class App extends React.Component { render() { return ( <AppNavigator onNavigationStateChange={null} /> ); } }