Comment obtenir de l'état de navigation en cours

Je suis à l'aide de Réagir de Navigation de l'Onglet Navigateur de https://reactnavigation.org/docs/navigators/tab, quand je basculer entre les Écrans d'onglets je n'ai pas tout état de navigation dans cette.accessoires de jeu.la navigation.

Onglet Navigateur:

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

ÉCRAN DU TABLEAU DE BORD: 

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

- Je obtenir des accessoires à l'Écran du tableau de bord lorsqu'il rend le composant d'abord mais je n'ai pas les accessoires lorsque je change les onglets.
J'ai besoin d'obtenir le nom d'Écran actuel je.e aujourd'HUI ou CETTESEMAINE.

InformationsquelleAutor Ahsan Ali | 2017-03-16
  1. 10

    Votre problème est sur l'Écran de "Tracking", react-navigation a officiellement guide pour cela. vous pouvez utiliser onNavigationStateChange de la piste de l'écran à l'aide de navigation intégrés conteneur ou écrire un Redux middleware pour suivre l'écran si vous souhaitez intégrer avec Redux. Plus de détails peuvent être trouvés à la officiellement guide: L'Écran De Suivi Des. Ci-dessous est un exemple de code à partir du guide en utilisant 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);
      }
    }}
  />
);
    InformationsquelleAutor ufxmeng
  2. 6

    Vérifier toutes les propriétés de la première, comme

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

    Au-dessus de tableau json va vous montrer l'état actuel de la navigation sous routeName indice c'est à dire

    this.props.navigation.state.routeName
    • Merci beaucoup c'est de m'aider à obtenir l'écran et changer la couleur de la navigation buttom
    InformationsquelleAutor vinod
  3. 1

    Avez-vous essayé de définir navigationOptions dans votre itinéraire objet?

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

    Vous pouvez également définir navigationOptions à un rappel qui sera appelée avec la navigation de l'objet.

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

    Lire plus sur navigationOptions https://reactnavigation.org/docs/navigators/

    InformationsquelleAutor devlighted