反应导航：使用选项卡导航器的堆栈导航器不起作用

Question

我们也检查了其他问题和文档，但找不到任何可以解决此问题的解决方案。这是代码：

它显示错误消息：

反应儿童只能接受一个反应元素的孩子。

   const MainTabBar = TabNavigator(
  {

   Home: {screen: HomeScreen},
   Profile: {screen: ProfileScreen},

  },

    {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'search';
        } 
         else if (routeName === 'Profile') {
          iconName = 'contact';
        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#222222',
      inactiveTintColor: '#222222',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    initialRouteName: 'Saved'

  }
);

const Main = StackNavigator(
  {
   Signin: {screen: SigninScreen},
    Signup: {screen: SignupScreen},
    Welcome: {screen: WelcomeScreen},
   Settings: {screen: SettingsScreen},
   Post: {screen: PostScreen},
   MainTab: {screen: MainTabBar}
  },
  {
    initialRouteName: "Signin",
    headerMode: "none",
  },
);

这两个导航器Stack导航器和Tab导航器如何相互配合？目前我们正试图从Signin导航到Home，而this.props.navigation.navigate（）选项不起作用。在过去，当我们使用Drawer而不是tab时，它可以工作，但现在它不适用于Tabs。

Answer 1

你可以试试这个：

const MainTabBar = TabNavigator(
  {
   Home: {screen: HomeScreen},
    Chat: {screen: ChatScreen},
    Profile: {screen: ProfileScreen},
  },
  ...
    // Set initial tab to HomeScreen/Tab
    initialRouteName: 'Home'
    swipeEnabled: false,
  }
);

const Main = StackNavigator(
  {
    Post: {screen: PostScreen},
    Signin: {screen: SigninScreen},
    Signup: {screen: SignupScreen},
    Welcome: {screen: WelcomeScreen},
    Settings: {screen: SettingsScreen},
    //Add MainTab as a screen
    MainTab: {screen: MainTabBar}
  },
  ...
);

从您的SigninScreen：this.props.navigation.navigate()导航到“MainTab”作为routeName。

这是一篇很好的文章来阅读React-Navigation : Stack Navigator inside Tab Navigator inside Drawer Navigator

快乐编码:)