StackNavigator中的本機TabNavigator，無法在屏幕之間移動

Question

我在我的react-native應用程序中使用react-navigation。 我必須將TabNavigators放在StackNavigator中才能使用內置的標頭功能。 見下文。

app.js

const FeedScreenStack = createStackNavigator({
  Feed: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  Feed: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

feed.js：

import React from 'react';
import { View } from 'react-native';

class feed extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <View style={{flex:1}}>
               ...
            </View>
        )
    }
}

export default feed;

點擊profile ，該應用程序可以移至個人資料屏幕。 但是單擊feed時，它不會移動到feed屏幕。 沒有警告或錯誤，當我單擊提要時，該應用程序完全不響應。 我究竟做錯了什么？

Answer 1

問題是您在很多地方都定義了重復的路由名稱，請嘗試使用其他名稱

像這樣做

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);