Przejdź do innego ekranu z przycisku w nagłówku

Question

Używam nowego React-navigation z native-native. Mam nawigację następująco:

StackNavigator:

1. TabNavigator // HomeNavigation
2. TabNavigator // NotificationNavigation

pełny kod:

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 ma nagłówek , a nagłówek ma odpowiedni składnik SearchNotification . SearchNotification ma ikonę, która w prasie chciałbym przejść do NotificatoinNavigation.

Jeśli jednak wprowadzę zmiany w nagłówku HomeNavigation w ten sposób, parametr SearchNotification nie zostanie wyświetlony w nagłówku.

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

Jak mogę przejść do innego ekranu z przycisku w nagłówku?

Answer 1

więc problem był (chyba), wewnątrz navigationOptions zamiast korzystania navigations musiałem użyć navigate, i przekazać je jako rekwizyty do dziecka (czyli SearchNotification).

Więc ostateczny kod wygląda następująco:

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

I w SearchNotification części:

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> 
     ) 
    } 
}