Navigation Screen组件的流式[React Navigation]

Question

我想为 React Native 应用程序创建嵌套导航，但流程有问题。我的 App.js 代码：

const Drawer = createDrawerNavigator();

const App: () => React$Node = () => {
  const isWeb = Platform.OS === 'web';

  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerType={'front'}
        drawerContent={(props) => (
          <DrawerContentScrollView {...props}>
            <DrawerItem label="First Item" onPress={() => {}}></DrawerItem>
            <DrawerItem label="Second Item" onPress={() => {}}></DrawerItem>
          </DrawerContentScrollView>
        )}>
        <Drawer.Screen component={HomeStack} name="Home" />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

我的HomeStack

const Stack = createStackNavigator();

export const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={({navigation}) => ({
          title: 'Home',
          headerLeft: () => (
            <Button title="Menu" onPress={() => navigation.toggleDrawer()} />
          ),
        })}
      />
      <Stack.Screen name="Details" component={DetailScreen} />
    </Stack.Navigator>
  );
};

我在 App.js 在 <Drawer.Screen component={HomeStack} name="Home" />:

收到这条 Flowtype 消息

() => any
(alias) const HomeStack: () => JSX.Element
import HomeStack
Cannot create `Drawer.Screen` element because property `navigation` is missing in  function type [1] but exists in  props [2] in property `component`.Flow(prop-missing)
HomeStack.js(15, 26): [1] function type
drawer_v5.x.x.js(915, 41): [2] props
Cannot create `Drawer.Screen` element because property `route` is missing in  function type [1] but exists in  props [2] in property `component`.Flow(prop-missing)
HomeStack.js(15, 26): [1] function type
drawer_v5.x.x.js(915, 41): [2] props

这在 HomeStack = () => {

的 HomeStack 中

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return:Flow(signature-verification-failure)

我尝试从@react-navigation/native 导入类型 NavigationScreenProp 或 NavigationScreenProps，但 Flow 宣布没有导出此类类型。（对于所有 npm 模块，我都有运行 flow-typed install）。我应该怎么办？那是我应该导入的类型吗？

Answer 1

我假设您使用的是最新版本的 flow，0.134.0，这是第一个默认启用 types-first 的版本。

因此，您需要在导出之前键入所有变量。所以你 HomeStack 会变成，

export const HomeStack = (): React.Node => {

您对 Drawer.Screen 的问题是因为它正在寻找接受道具 navigation 和 route 的组件。所以你可以像这样更新你的道具，

type Props = {|
  navigation: any,
  route: any,
|};

export const HomeStack = (props: Props): React.Node => {

Navigation Screen组件的流式[React Navigation]

Flow type of Navigation Screen components [React Navigation]

react-native

react-navigation

flowtype