web-dev-qa-db-ja.com

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

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

ダッシュボード画面：

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を取得する必要があります。

reactjsreact-nativereact-reduxreact-navigation
8
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);
      }
    }}
  />
);
11
ufxmeng

最初に、すべてのプロパティを確認します

<Text>{JSON.stringify(this.props, null, 2)}</Text>

上記のjson配列は、routeNameインデックスの下のナビゲーションの現在の状態を示します。

this.props.navigation.state.routeName
6
vinod

ルートオブジェクトで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/

1
devlighted