現在のナビゲーション状態を取得する方法

Question

タブ画面間を切り替えると、React Navigationのタブナビゲータがhttps://reactnavigation.org/docs/navigators/tabから使用されています。私は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 
     } 
    }); 

ダッシュボード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> 
    ); 
    } 
} 

それが最初のコンポーネントを描画するが、私は切り替えたときに、私は小道具を取得しないとき、私はダッシュボード画面で小道具を取得タブ。 現在の画面名、つまり今日または今週を取得する必要があります。

Answer 1

あなたの問題は「スクリーントラッキング」についてのものです。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); 
     } 
    }} 
    /> 
); 

Answer 2

はあなたのルートオブジェクトに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/

についてもっと読みます