我正在使用新的
React-navigation从反应本地。我有导航如下：
StackNavigator：
> TabNavigator // HomeNavigation
> 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有一个图标，按照我想去“通知导航”。
但是，如果以这种方式更改HomeNavigation的标题，则SearchNotification不会显示在标题中。
HomeNavigation.navigationOptions = {
title: 'Home',header: {
tintColor: 'white',style: {
backgroundColor: '#2ec76e',right: ({navigate}) => <SearchNotification navigate={navigate}/>
},};
如何从标题中的按钮导航到不同的屏幕？
所以问题是(我想)，在navigationOptions中，而不是使用导航，我不得不使用导航，并将其作为道具传递给孩子(即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>
)
}
}
