StackNavigator中的React-native TabNavigator无法在屏幕之间移动

Question

我正在使用react-navigation和我的react-native应用程序。我必须将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'
  }
);