标签: react-navigation-v6

使用反应导航时存在类型问题，当使用Stack.Navigation或Stack.Group来自createNativeStackNavigator

该问题表示JSX.element消息末尾的类型不匹配更具体： Type '{}' is not assignable to type 'ReactNode'

整个消息：

'Stack.Navigator' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element.
    Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: …

导航类型定义如下，当我从 例如 导航AOne到时BTwo，控制台id:99 日志props.route.params显示正确的信息。但props.route.params.id抛出类型错误

类型错误：未定义不是对象（正在评估“props.route.params.id”）

    // navigation related imports in all components 
    import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
    import {CompositeScreenProps, NavigatorScreenParams} from '@react-navigation/core';
    import {StackScreenProps} from '@react-navigation/stack';

    // type defenitions
    export type StackOneParams = {
      AOne:undefined,
      BOne: undefined,
      // some other screens
    };
    export type StackTwoParams = {
      ATwo: undefined;
      BTwo:{id:number};
      // some other screens
    };
    
    export type TabParams = {
      StackOne: NavigatorScreenParams<StackOneParams>;
      StackTwo: NavigatorScreenParams<StackTwoParams>;
    // ... some other stacks each represent a …

我有一个关于模态堆栈内的卡片堆栈的问题，如附图所示。

所以，只是重复我想做的事情。我有一个打开绿色模式的screen选项。presentation: 'modal'

在那个绿色模式中，我有一个按钮应该调用一个导航调用，该调用应该显示screen带有选项的蓝色presentation: 'card'以及返回到绿屏的能力。

我已经用WIX的 React-native-navigation 库做了类似的事情，但我不知道是否可以用 React-navigation 来完成。

任何帮助深表感谢。

干杯

我正在尝试将旧的 React navigation v4 迁移到 v6（超过 100 条路线）。但我面临着如何找到最佳结构来分割单独文件/组件中的屏幕组。

我已经尝试过这样做，以移出模态：

const ModalGroup = () => (
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="ModalA" component={ModalAScreen} />
    <Stack.Screen name="ModalB" component={ModalBScreen} />
  </Stack.Group>
);

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <ModalGroup />
  </Stack.Navigator>
);

但在运行时不允许出现此错误：

错误：导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级（找到“ModalGroup”）。要在导航器中渲染此组件，请将其在 'component' 属性中传递给 'Screen'。

但这是有效的（但对我来说看起来很难看）：

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    {ModalGroup()}
  </Stack.Navigator>
);

那么，在单独的文件中构建/组织屏幕组以避免创建包含所有配置和导入的巨大根导航器的最佳方法是什么？

我有一个屏幕，可以调用 api 来获取一些数据，然后显示

我看到的一个问题是，当我离开屏幕（我使用的是react-navigation 6.x）然后返回时，它useEffect()不会被调用

从我到目前为止所读到的内容来看，这取决于userId不改变的价值（我想我需要围绕这个问题做更多阅读useEffect()才能更好地理解，也许有人会帮助解决这个问题）

import React, {useState, useEffect, useContext} from 'react';
import AppContext from '../../components/AppContext.js';

export const CreateNewEvent = () => {
  const globalContext = useContext(AppContext);
  const userId = globalContext.userInfo.id;

  useEffect(() => {
    const body = JSON.stringify({userId});
    fetch(eventTypesUrl, {
      method: 'POST',
      headers: {'Content-Type': 'application/json', Accept: 'application/json'},
      body: body,
    })
      .then(response => response.json())
      .then(json => setEventTypeData(json))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));
    }, [userId]);

}

所以在我的场景中，我位于屏幕 1（在这里我可以创建一个事件，该事件发出请求以获取所有事件类型并将它们加载到选择菜单中）

当我导航到屏幕 2（以创建事件类型）然后返回屏幕 1 时，useEffect()不会调用挂钩，导致无法看到我刚刚创建的事件类型（希望这是有意义的）。还请注意，任何先前在屏幕 …

我对 React-navigation v6 的模式呈现有疑问，无法呈现其中包含 ScrollView 的模式。实际上，如果我启用手势向下滑动模态，如果内部有 ScrollView 并且我只能在标题上向下滑动，则它不起作用。

我需要当到达 ScrollView 的顶部时，必须开始关闭动画手势。这是预期的行为：

这是 RootNavigation 中使用的代码：

<RootStack.Group screenOptions={{ presentation: 'modal', cardOverlayEnabled: true, ...TransitionPresets.ModalPresentationIOS }}>
    <RootStack.Screen
       component={ModalPage}
       name="ModalPage"
       options={ModalPageNavOptions}
    />
</RootStack.Group> 

这是ModalPage.js的渲染

<ScrollView nestedScrollEnabled>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
</ScrollView>