如何使用react native导航从顶部标签页导航到堆栈屏幕?

9nvpjoqh  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(146)

我正在用react native做一个expo应用程序。我有一个堆栈导航器,我有一个材料顶部标签导航器作为堆栈屏幕。从ProfileAccountScreen,我可以导航到TopTabNavigator,但我不能从TopTabNavigator导航到另一个堆栈屏幕?

`<NavigationContainer>
      <Stack.Navigator>
            <Stack.Screen
              name="ProfileAccountScreen"
              component={ProfileAccountScreen}
              options={{ title: "Välkommen" }}
            />
            <Stack.Screen
              name="TopTabNavigator" 
              component={TopTabNavigator}
              options={{ headerShown: false }} 
            />
            <Stack.Screen
              name="CreateTaskScreen"
              component={CreateTaskScreen}
              options={{ title: "Skapa syssla" }}
            />
      </Stack.Navigator>
    </NavigationContainer>`

下面是TopTabNavigator:

`const Tab = createMaterialTopTabNavigator();

export default function TopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="SomeScreen" component={SomeScreen} />
    </Tab.Navigator>
  );
}`

问题是,我找不到任何好的文档来解释如何在顶部标签导航屏幕和堆栈屏幕之间导航。在我的RootStackParamList中,我有TopTabNavigator而不是屏幕,因为它是整个顶部导航器作为堆栈屏幕。
我试过像这样使用导航作为 prop 类型:

`type Props = NativeStackScreenProps<RootStackParamList, "TopTaskNavigator"> & {
  profileNavigation: NativeStackScreenProps<RootStackParamList>;
};`

`export default function HouseholdTasksScreen({ navigation }: Props) {
  return (
    <View>
      <Text>Här visas alla tasks för det valda hushållet</Text>
      <Button
        title="Navigera till att skapa syssla"
        onPress={() => navigation.navigate("CreateTaskScreen")}
      ></Button>
    </View>
  );
}`

在这种情况下,我得到一个错误消息:

`Type '({ navigation }: Props) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "TopTaskNavigator"> | undefined'.`

事情是,标签导航器需要说它在哪里(在tabparamlist中),并说在哪里导航(在stackparamlist中),我想??

yqkkidmi

yqkkidmi1#

参见ReactNavigation.org文档上的useScrollToTop
你可以用这个钩子。

const ref = React.useRef(null);

useScrollToTop(ref);

return <ScrollView ref={ref}>{/* content */}</ScrollView>;

相关问题