Jak uzyskać bieżący stan nawigacji

Question

Używam Nawigatora zakładek Nawigacja od https://reactnavigation.org/docs/navigators/tab, kiedy przełączam się między ekranami kart, nie otrzymuję żadnego stanu nawigacji w tym.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 
     } 
    }); 

DESKA EKRAN:

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> 
    ); 
    } 
} 

dostać rekwizyty w Dashboard ekranu, gdy renderuje pierwszy składnik, ale nie dostać rekwizyty po zmianie zakładki. Potrzebuję uzyskać aktualną nazwę ekranu, np. DZISIAJ lub Trzema.

Answer 1

Twój problem dotyczy "Śledzenia ekranu", react-navigation ma oficjalny przewodnik po tym. możesz użyć onNavigationStateChange, aby śledzić ekran za pomocą wbudowanego kontenera nawigacyjnego lub napisać oprogramowanie pośrednie Redux, aby śledzić ekran, jeśli chcesz zintegrować się z Redux. Więcej szczegółów można znaleźć na oficjalnym przewodniku: Screen-Tracking. Poniżej znajduje się przykładowy kod z prowadnicy za pomocą onNavigationStateChange:

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

Czy próbowali zdefiniować navigationOptions w swoim obiekcie trasie?

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

Możesz również ustawić navigationOptions na wywołanie zwrotne, które zostanie wywołane z obiektem nawigacji.

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

Więcej o navigationOptions https://reactnavigation.org/docs/navigators/