我想为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
)。我该怎么办?那是我应该导入的类型吗?
答案 0 :(得分: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 => {