ヘッダーのボタンから別の画面に移動します

Question

反応ネイティブの新しいReact-navigationを使用しています。

StackNavigator：

1. TabNavigatorコンテナ// HomeNavigation
2. TabNavigatorコンテナ// NotificationNavigation

全コード：

const MainNavigation = StackNavigator({ 
    Home: { 
     screen: HomeNavigation, 
    }, 
    Notification: { 
     screen: NotificationNavigation, 
    } 
}); 

const HomeNavigation = TabNavigator({ 
    AllPost: { 
     screen: All, 
    }, 
    ArticlePost: { 
     screen: Article, 
    }, 
    BusinessPost: { 
     screen: Job, 
    }, 
}); 

HomeNavigation.navigationOptions = { 
    title: 'Home', 
    header: { 
     right: <SearchNotification/> 
    }, 
}; 

class SearchNotification extends React.Component { 
    goToNotification =() => { 
     this.props.navigate('Notification'); 
    }; 

    render() { 
     return (
      <View style={styles.container}> 
       <TouchableOpacity> 
        <Icon name="md-search" style={styles.Icon}/> 
       </TouchableOpacity> 
       <TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}> 
        <Icon name="md-notifications" style={styles.Icon}/> 
        <Text style={styles.number}>3</Text> 
       </TouchableOpacity> 
      </View> 
     ) 
    } 
} 

const NotificationNavigation = TabNavigator({ 
    Comment: { 
     screen: NotificationComment, 
    }, 
    Follow: { 
     screen: NotificationFollow, 
    } 
}); 

HomeNavigationが持つヘッダを以下のように私は、ナビゲーションを持っています、ヘッダーはSearchNotificationの右コンポーネントを持ちます。 SearchNotificationには、私がNotificatoinNavigationに行きたいと思うアイコンがあります。

ただし、このようにHomeNavigationのヘッダーを変更すると、ヘッダーにSearchNotificationが表示されません。

HomeNavigation.navigationOptions = { 
    title: 'Home', 
    header: { 
     tintColor: 'white', 
     style: { 
      backgroundColor: '#2ec76e', 
     }, 
     right: ({navigate}) => <SearchNotification navigate={navigate}/> 
    }, 
}; 

ヘッダーのボタンから別の画面に移動するにはどうすればよいですか？

Answer 1

だから、問題はnavigationOptions代わりのnavigationsを使用して内部で私がnavigateを使用して、子（すなわちSearchNotification）に小道具としてそれを渡すために持っていた、（と思う）でした。

だから、最終的なコードは次のようになります。

HomeNavigation.navigationOptions = { 
    title: 'Home', 
    header: ({navigate}) => ({ 
     right: (
      <SearchNotification navigate={navigate}/> 
     ), 
    }), 
}; 

そしてSearchNotificationコンポーネント内：

export default class SearchNotification extends React.Component { 
    goToNotification =() => { 
     this.props.navigate('Notification'); 
    }; 

    render() { 
     return (
      <View style={styles.container}> 
       <TouchableOpacity> 
        <Icon name="md-search" style={styles.Icon}/> 
       </TouchableOpacity> 
       <TouchableOpacity style={styles.notificationWrapper} 
            onPress={() => this.props.navigate('Notification')}> 
        <Icon name="md-notifications" style={styles.Icon}/> 
        <Text style={styles.number}>3</Text> 
       </TouchableOpacity> 
      </View> 
     ) 
    } 
}