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

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

你可以试试这个：

@conversation_all

从您的SigninScreen：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} }, ... ); 导航到“MainTab”作为routeName。

以下是阅读React-Navigation : Stack Navigator inside Tab Navigator inside Drawer Navigator

的好文章

快乐编码：）

Answer 2

面对相同的问题，我发现将两个导航器置于相同的作用域（在React组件内部）会导致此问题。

例如：这不起作用：

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;