2017-10-19 27 views
0

J'utilise react-navigation pour créer TabNavigator imbriqué.Impossible de changer d'onglet dans TabNavigator (rea-navigation)

enter image description here

Mon problème est que je ne peux pas accéder à d'autres onglet jusqu'à ce que je clique sur le bouton de recherche. Cela est tellement bizarre.

(MISE À JOUR) Je viens de trouver que lorsque je change d'onglet, il change l'en-tête pour 'Suivre' ou 'Populaire' seulement. Il ne rend pas l'onglet Seconde, 'Populaire', et il ne change pas l'onglet.

Voici d'abord StackNavigator (Ci-joint à la racine)

export default StackNavigator ({ 
    Feedo: { 
    screen: FeedMainTabNavigator, 
    navigationOptions: { 
     title: 'Title', 
    }, 
    }, 
    Searcho: { 
    screen: SearchScreen, // if I click second tab, it doesn't show the second tab. 
      //But then I navigate to SearchScreen and goback to FeedScreen, 
      //I can see the second tab was selected. 
    } 
}, { 
    lazy: true 
}); 

Voici FeedMainTabNavigator

export default TabNavigator({ 
    UserFeed: { 
    screen: UserFeedScreen 
    }, 
    PopularPost: { 
    screen: PopularPostScreen 
    }, 
}, { 
    tabBarOptions: { 
     style: { 
     backgroundColor: "#7E50CE", 
     overflow: "hidden" 
     }, 
     activeTintColor: "white", 
     inactiveTintColor: "white", 
     tabStyle: { width: 120 }, 
     indicatorStyle: { backgroundColor: 'white' } 
    } 
    } 
); 

Voici UserFeedScreen (peut-être problème ici?)

import {withRkTheme, RkText} from 'react-native-ui-kitten' 
let ThemedNavigationBar = withRkTheme(NavBar); 
import { FontAwesome } from '../../assets/icons' 

class UserFeedScreen extends Component { 
    static navigationOptions = ({navigation}) => ({ 
    title: 'Follow', 
    headerRight: (
     <RkText 
     rkType='awesome small' 
     style={{color: 'white'}} 
     onPress={() => {navigation.navigate('Searcho')}}>{FontAwesome.search}</RkText> 
    ), 
    header: (headerProps) => { 
     return <ThemedNavigationBar navigation={navigation} headerProps={headerProps}/> 
    }, 
    }) 

Répondre

1

Vous avez besoin d'une réinitialiser parce que Searcho est à un niveau aobve. Essayez cette

import { NavigationActions } from 'react-navigation'; 

remplacer onPress={() => {navigation.navigate('Searcho')}} avec

onPress={() => { 
    const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
     NavigationActions.navigate({ routeName: 'Searcho'}) 
     ] 
    }); 
    navigation.dispatch(resetAction); 
    }} 
+0

Je pense que vous pouvez résoudre ce problème (+200 bounty): https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator -when-user-log-out-from-other-screen –