javascript - 如何在 React Native 中创建子 Tab.Screen？

问题描述

我有四个标签屏幕：主页图库新转我的帐户

主页.js

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === HomePageTitle) {
            iconName = focused ? "md-home" : "ios-home";
          } else if (route.name === TurnsPageTitle) {
            iconName = focused ? "md-calendar" : "ios-calendar";
          } else if (route.name === GalleryPageTitle) {
            iconName = focused ? "ios-images" : "ios-images";
          } else if (route.name === MyAccountTitle) {
            iconName = focused ? "md-contact" : "ios-contact";
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: "#ff8da1",
        inactiveTintColor: "gray",

        style: {
          backgroundColor: "white",
        },
      }}>
      <Tab.Screen
        name={HomePageTitle}
        component={Home}
        options={{ title: "Home" }}
      />
      <Tab.Screen
        name={GalleryPageTitle}
        component={Images}
        options={{ title: "Gallery" }}
      />

      <Tab.Screen name={TurnsPageTitle} options={{ title: "New-turn" }}>
        {(props) => (
          <TurnType
            {...props}
            component={TurnType}
            serverDate={currentDate}
            plusMonth={plusMonth}
            phone={phone}
            name={name}
          />
        )}
      </Tab.Screen>

      

      <Tab.Screen name={MyAccountTitle} options={{ title: "MyAccount" }}>
        {(props) => (
          <MyAccount
            {...props}
            component={MyAccount}
            name={name}
            phone={phone}
          />
        )}
      </Tab.Screen>
    </Tab.Navigator>
  );

在我按下 New-turn 后，有一个按钮可以让您导航到另一个堆栈屏幕（在 app.js 中） <Stack.Screen name='Calendars' component={Calendars} />

我使用以下代码导航它：

navigation.replace("Calendars", {
                      serverDate: global.serverDate,
                      plusMonth: global.plusMonth,
                      phone: global.phone,
                      turnUnits: item.type_units,
                      turnTypeName: item.type_name,
                      navigation: navigation,
                    });

当我这样做时，当我导航到日历时，我的底部选项卡就会消失。我需要一种方法来导航到日历，而该选项卡在底部选项卡中不可见，然后当我按下按钮时导航回新转屏幕。这个怎么做？

谢谢！

标签： javascriptreact-native

javascript - 如何在 React Native 中创建子 Tab.Screen？

问题描述

解决方案

推荐阅读