如何獲取當前的導航狀態

我在使用從https://reactnavigation.org/docs/navigators/tab的React Navigation的Tab Navigator，當我在Tab.screen之間切換時，我沒有在this.props.navigation中獲得任何導航狀態。如何獲取當前的導航狀態

標籤導航：

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

儀表板操作：

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

我會在儀表盤屏幕的道具時，它呈現組件第一，但是當我切換我沒有得到道具標籤。我需要獲取當前的屏幕名稱，例如TODAY或THISWEEK。

來源

2017-03-16 Ahsan Ali

你的問題是關於「屏幕跟蹤」，react-navigation有一個正式的指導。您可以使用onNavigationStateChange通過使用內置導航容器來跟蹤屏幕，或者如果要與Redux集成，請使用Redux中間件來跟蹤屏幕。更多的細節可以在官方指南中找到：Screen-Tracking。下面是從導向一個示例代碼使用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); 
     } 
    }} 
    /> 
);

來源

2017-07-13 09:15:45 ufxmeng

您是否嘗試過定義你的路由對象navigationOptions？

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

您還可以將navigationOptions設置爲將與導航對象調用的回調。

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

瞭解更多關於navigationOptions https://reactnavigation.org/docs/navigators/

來源

2017-07-13 09:44:28 devlighted

如何獲取當前的導航狀態

回答

相關問題