在 BottomTabNavigator 问题中反应本机嵌套堆栈

Question

我想要实现的导航过程是 (BottomTabNavigator -> RoutinesStackNavigator -> Routines) 我正在使用嵌套在底部选项卡导航器中的堆栈导航器

当我导航到 RoutinesStackNavigator 时，它没有加载 Routines 页面，我不确定为什么。

BottomTabNavigation.tsx

export default function Navigation() {
  return (
    <>
      <SoundProvider>
        <TimerProvider>
          <NavigationContainer>
            <Tab.Navigator
              sceneContainerStyle={{ backgroundColor: COLORS.white }}
              initialRouteName="Pomodoro"
              screenOptions={({ route, navigation }) => ({
                tabBarShowLabel: false,
                headerShown: false,
                tabBarStyle: [styles.tabBar, styles.tabBarBoxShadow],
                tabBarIcon: ({ focused }) => {
                  let rn = route.name;
                  let iconTag;
                  // assigning navigation icon based on name of route
                  if (rn === pomodoroName) {
                    // assigning JSX Tag
                    iconTag = (
                      <PomodoroIcon
                        size={iconSize}
                        fillColor={iconColor}
                        isFocused={focused}
                      />
                    );
                  } else if (rn === agendaName) {
                    iconTag = (
                      <AgendaIcon
                        size={iconSize}
                        fillColor={iconColor}
                        isFocused={focused}
                      />
                    );
                  } else if (rn === tutorialsName) {
                    iconTag = (
                      <TutorialsIcon
                        size={iconSize}
                        fillColor={iconColor}
                        isFocused={focused}
                      />
                    );
                  } else if (rn === routinesStackNavigatorName) {
                    iconTag = (
                      <RoutinesIcon
                        size={iconSize}
                        fillColor={iconColor}
                        isFocused={focused}
                      />
                    );
                  }
                  return (
                    <Pressable
                      onPress={() => {
                        // add haptic feedback and navigate to new route
                        addLightHapticFeedback("light");
                        navigation.navigate(rn);
                      }}
                    >
                      {iconTag}
                    </Pressable>
                  );
                },
              })}
            >
              <Tab.Screen name={pomodoroName} component={Pomodoro} />
              <Tab.Screen name={agendaName} component={Agenda} />
              <Tab.Screen name={tutorialsName} component={Tutorials} />
              <Tab.Screen
                name={routinesStackNavigatorName}
                component={RoutinesStackNavigator}
              />
            </Tab.Navigator>
          </NavigationContainer>
        </TimerProvider>
      </SoundProvider>
    </>
  );
}

RoutinesStackNavigator.tsx

export default function RoutinesStackNavigator() {
  const Stack = createStackNavigator();

  return (
    <>
      <SafeAreaView>
        <Stack.Navigator initialRouteName="Routines">
          <Stack.Screen name="Routines" component={Routines} />
          <Stack.Screen name="CreateRoutine" component={CreateRoutine} />
        </Stack.Navigator>
      </SafeAreaView>
    </>
  );
}

index.Routines.tsx

export default function Routines() {
  const { width } = useWindowDimensions();
  return (
    <>
      <FocusedStatusBar barStyle="light-content" />
      <View style={styles.container}>
        <View style={styles.row}>
          <Text style={styles.title}>{STRINGS.routinesTitle}</Text>
          <TouchableOpacity onPress={() => {}}>
            <AntDesign name="pluscircle" size={44} color={COLORS.white} />
          </TouchableOpacity>
        </View>
        <View style={[styles.main, { width: width }]}>
          <View style={{ height: "72%" }}>
            <ScrollView
              showsVerticalScrollIndicator={true}
              style={{ marginTop: 10, marginBottom: 10 }}
            >
              <RoutineCard />
              <RoutineCard />
            </ScrollView>
          </View>
          <TouchableOpacity style={styles.button} onPress={() => {}}>
            <Text style={styles.buttonText}>Start Session</Text>
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
}

除了 StatusBar 颜色变化之外，没有 Routines 组件呈现。 因此组件必须呈现，但内容的 rest 没有显示。

Answer 1

您必须从RoutinesStackNavigator.tsx中删除<SafeAreaView>

const Stack = createStackNavigator();

export default function RoutinesStackNavigator() {

  return (
    <Stack.Navigator initialRouteName="Routines">
      <Stack.Screen name="Routines" component={Routines} />
      <Stack.Screen name="CreateRoutine" component={CreateRoutine} />
    </Stack.Navigator>
  );
}