无法在 TabNavigator 中切换标签 (react-navigation)

Can't switch Tabs in TabNavigator (react-navigation)

我正在使用 react-navigation 构建嵌套的 TabNavigator。

我的问题是 在单击搜索按钮之前我无法导航到其他选项卡。这太奇怪了。

(UPDATE) 我刚刚发现,当我更改选项卡时,它仅将 header 更改为 'Follow' 或 'Popular'。它不会呈现第二个选项卡 'Popular',也不会切换选项卡。

这是第一个 StackNavigator(附加到根)

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

这是 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' }
    }
  }
);

这是 UserFeedScreen(可能这里有问题?)

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

您需要重置,因为 Searcho 处于更高级别。试试这个

import { NavigationActions } from 'react-navigation';

onPress={() => {navigation.navigate('Searcho')}}替换为

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