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

Question

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

它显示错误消息：

react children 只期望接收一个 react element child。

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

这 2 个导航器 Stack navigator 和 Tab navigator 如何相互协作？目前我们正在尝试从登录导航到主页，而 this.props.navigation.navigate () 选项不起作用。过去我们使用 Drawer 而不是 Tab 时它可以工作，但现在它不适用于 Tabs。

Answer 1

遇到同样的问题，我发现两个导航器在同一范围内（在反应组件内）会导致这个问题。

例如：这行不通：

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const A = ({ navigation }) => {
  const B = (
    <Tab.Navigator>
      ...
    </Tab.Navigator>
  );
  const C = () => (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="Default" component={B} />
        ...
      </Stack.Navigator>
  );
  return C;
};

export A;

但这会起作用：

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const A = ({ navigation }) => {
  const B = (
    <Tab.Navigator>
      ...
    </Tab.Navigator>
  );
  return B;
};   

const C = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="Default" component={A} />
      ...
    </Stack.Navigator>
);

export C;

Answer 2

你可以试试这个：

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”作为路由名称。

这里有一篇好文章可以阅读React-Navigation : Stack Navigator inside Tab Navigator inside Drawer Navigator