导航到标题中按钮的不同屏幕

Question

我正在使用来自react-native的新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> 
     ) 
    } 
}