So erhalten Sie den aktuellen Navigationsstatus

Question

Ich verwende React Navigation Tab Navigator von https://reactnavigation.org/docs/navigators/tab, wenn ich zwischen den Registerkarten wechseln, ich bekomme keinen Navigationsstatus in this.props.navigation.

Tab Navigator:

import React, { Component } from 'react'; 
    import { View, Text, Image} from 'react-native'; 
    import DashboardTabScreen from 'FinanceBakerZ/src/components/dashboard/DashboardTabScreen'; 
    import { TabNavigator } from 'react-navigation'; 


     render() { 
     console.log(this.props.navigation); 

     return (
      <View> 
       <DashboardTabNavigator /> 
      </View> 
     ); 
     } 



    const DashboardTabNavigator = TabNavigator({ 
     TODAY: { 
     screen: DashboardTabScreen 
     }, 
     THISWEEK: { 
     screen: DashboardTabScreen 
     } 
    }); 

DASHBOARD SCREEN:

import React, { Component } from 'react'; 
import { View, Text} from 'react-native'; 

export default class DashboardTabScreen extends Component { 
    constructor(props) { 
    super(props); 

    this.state = {}; 
    console.log('props', props); 

    } 

    render() { 
    console.log('props', this.props); 
    return (
     <View style={{flex: 1}}> 
     <Text>Checking!</Text> 
     </View> 
    ); 
    } 
} 

ich Requisiten auf Armaturenbrett Bildschirm erhalten, wenn es um die Komponente zuerst rendert aber ich weiß nicht Requisiten, wenn ich wechseln die Registerkarten. Ich brauche den aktuellen Namen des Bildschirms, d. H. HEUTE oder THISWEEK.

Answer 1

Ihr Problem ist über "Screen Tracking", react-navigation hat eine offizielle Anleitung dafür. Sie können onNavigationStateChange verwenden, um den Bildschirm mithilfe des integrierten Navigationscontainers zu verfolgen, oder eine Redux-Middleware schreiben, um den Bildschirm zu verfolgen, wenn Sie mit Redux integrieren möchten. Mehr Details finden Sie im offiziellen Führer: Screen-Tracking. Unten ist ein Beispielcode aus der Führung durch onNavigationStateChange mit:

import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge'; 

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID); 

// gets the current screen from navigation state 
function getCurrentRouteName(navigationState) { 
    if (!navigationState) { 
    return null; 
    } 
    const route = navigationState.routes[navigationState.index]; 
    // dive into nested navigators 
    if (route.routes) { 
    return getCurrentRouteName(route); 
    } 
    return route.routeName; 
} 

const AppNavigator = StackNavigator(AppRouteConfigs); 

export default() => (
    <AppNavigator 
    onNavigationStateChange={(prevState, currentState) => { 
     const currentScreen = getCurrentRouteName(currentState); 
     const prevScreen = getCurrentRouteName(prevState); 

     if (prevScreen !== currentScreen) { 
     // the line below uses the Google Analytics tracker 
     // change the tracker here to use other Mobile analytics SDK. 
     tracker.trackScreenView(currentScreen); 
     } 
    }} 
    /> 
); 

Answer 2

Haben Sie versucht, navigationOptions in Ihrer Route Objekt zu definieren?

const DashboardTabNavigator = TabNavigator({ 
    TODAY: { 
    screen: DashboardTabScreen 
    navigationOptions: { 
    title: 'TODAY', 
    }, 
    }, 
}) 

Sie können naviageOptions auch auf einen Callback setzen, der mit dem Navigationsobjekt aufgerufen wird.

const DashboardTabNavigator = TabNavigator({ 
    TODAY: { 
    screen: DashboardTabScreen 
    navigationOptions: ({ navigation }) => ({ 
    title: 'TODAY', 
    navigationState: navigation.state, 
    }) 
    }, 
}) 

Lesen Sie mehr über navigationOptions https://reactnavigation.org/docs/navigators/