반응 탐색 : 최고 수준의 구성 요소

Question

에서 소품을 누락 나는 다음과 같은 방식으로 설정 스택 네비게이터가

const wishlizt = StackNavigator({ 
     Splash: {screen: SplashScreen}, 
     SignIn: {screen: SignInScreen}, 
     SignUp: {screen: SignUpScreen}, 
     Profile: {screen: ProfileScreen}, 
     Home: {screen: MainScreenNavigator}, 
     Chat: {screen: ChatScreen} 
    }, 
    { 
     navigationOptions: { 
      title: 'Wishlizt', 
      header: { 
       style: { 
        backgroundColor: Colors.bgBrand, 
        elevation: null, 
       }, 
       titleStyle: { 
        color: Colors.lightest 
       }, 
       right: <HeaderRight /> 
      } 
    }, 
     initialRouteName: 'Splash' 

}); 

당신은 내가 몇 가지 아이콘이 포함되어 내 헤더의 구성 요소 HeaderRight 사용 볼 수 있듯이 - 설정 장부를, 프로필, 등등. 그 아이콘 'TouchableOpacity onPress 메서드에서 탐색 할 수 싶습니다. 그러나 탐색 구성 'this.props.navigation'이 해당 구성 요소에 없습니다.

공식 문서 페이지는 최고 수준의 구성 요소에 이동 전화하는 방법이 코드 샘플을 가지고 있으며,

const AppNavigator = StackNavigator(SomeAppRouteConfigs); 

class App extends React.Component { 
    someEvent() { 
    // call navigate for AppNavigator here: 
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params }); 
    } 
    render() { 
    return (
     <AppNavigator ref={nav => { this.navigator = nav; }} /> 
    ); 
    } 
} 

나는이 내 예에서 일할 수있는 방법을 볼 수 없습니다입니다 '심판'을 사용하는 것이 좋습니다. 누구든지이 일을 도울 수 있습니까?

Answer 1

header 재산

거대한 덕분에 기능뿐만 아니라 객체가 될 수 있습니다. 함수 일 때 navigation 개체가 첫 번째 매개 변수로 전달되면 prop으로 HeaderRight 구성 요소로 전달할 수 있습니다.

navigationOptions: { 
      header: (navigation) => { 
       return { 
        style: { 
        backgroundColor: Colors.bgBrand, 
        elevation: null, 
        }, 
        titleStyle: { 
        color: Colors.lightest 
        }, 
        right: (<HeaderRight 
          navigation={navigation} 
          />), 
       }; 
      }, 
}, 

Answer 2

이것이 도움이되는지 나는 잘 모르겠다. 내 전화가 반응 탐색에서 작동하지 않는 이유를 연구 중이다. 그러나 당신의 괄호는 당신의 모범에서 엉망입니다. 내비게이션 옵션의 초기 경로 이름이 맞았 겠지만 들여 쓰기가 다른 모든 스토리를 보여줍니다.