현재 내비게이션 상태를 얻는 방법

탭 화면 간을 전환 할 때 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 
     } 
    });

대시 보드 화면 :

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에서 확인할 수 있습니다.

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을 정의하는 것을 시도했다 : 아래 onNavigationStateChange을 사용하여 가이드의 샘플 코드는?

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

현재 내비게이션 상태를 얻는 방법

답변

관련 문제