如何获取当前的导航状态

我在使用从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

如何获取当前的导航状态

回答

相关问题