वर्तमान नेविगेशन स्थिति कैसे प्राप्त करें

Question

मैं https://reactnavigation.org/docs/navigators/tab से प्रतिक्रिया नेविगेशन के टैब नेविगेटर का उपयोग कर रहा हूं, जब मैं टैब स्क्रीन के बीच स्विच करता हूं तो मुझे इस.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> 
    ); 
    } 
} 

मैं डैशबोर्ड स्क्रीन पर रंगमंच की सामग्री जब यह renders घटक पहले मिल लेकिन जब मैं स्विच मैं सहारा नहीं मिलता टैब मुझे वर्तमान स्क्रीन नाम i.e आज या THISWEEK प्राप्त करने की आवश्यकता है।

Answer 1

आपकी समस्या "स्क्रीन ट्रैकिंग" के बारे में है, react-navigation इसके लिए आधिकारिक तौर पर मार्गदर्शिका है। यदि आप रेडक्स के साथ एकीकृत करना चाहते हैं तो आप स्क्रीन को ट्रैक करने के लिए स्क्रीन को ट्रैक करने के लिए onNavigationStateChange का उपयोग स्क्रीन पर ट्रैक करने के लिए कर सकते हैं या स्क्रीन को ट्रैक करने के लिए रेडक्स मिडलवेयर लिख सकते हैं। आधिकारिक तौर पर गाइड पर अधिक जानकारी मिल सकती है: Screen-Tracking।

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

आप अपने मार्ग वस्तु में navigationOptions को परिभाषित करने की कोशिश की है: नीचे onNavigationStateChange का उपयोग करके गाइड से एक नमूना कोड है?

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

आप नेविगेशन ऑप्शन को कॉलबैक पर भी सेट कर सकते हैं जिसे नेविगेशन ऑब्जेक्ट के साथ बुलाया जाएगा।

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

navigationOptions बारे में अधिक पढ़ें https://reactnavigation.org/docs/navigators/