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的{{1}}中收到此Flowtype消息：

<Drawer.Screen component={HomeStack} name="Home" />

这在() => 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 = () => {

我尝试从@ react-navigation / native导入类型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)或NavigationScreenProp，但是Flow宣布没有这种类型的出口。（我为所有npm模块都运行了NavigationScreenProps）。我该怎么办？那是我应该导入的类型吗？

Answer 1

我假设您使用的是最新版本的流，即0.134.0，这是默认情况下启用类型优先的第一个版本。

因此，在导出变量之前，您需要先键入所有变量。因此，您HomeStack将更改为

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

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

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

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

导航屏幕组件的流程类型[反应导航]

1 个答案: