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

Question

我正在使用 react-navigation 和我的 react-native 应用程序。我必须将 TabNavigators 放在 StackNavigator 中才能使用内置的 header 功能。见下文。

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

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

React-native TabNavigator inside StackNavigator, cannot move between screens

reactjs

react-native

react-navigation

stack-navigator

tabnavigator