我有以下两段代码:
CustomHeader.tsx
import { View, StyleSheet, Button } from 'react-native';
import { NavigationScreenProps } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
export const CustomHeader = ({ navigation }: NavigationScreenProps) => (
<View style={[styles.container]}>
<Icon
name="md-menu"
size={32}
color="black"
style={{ marginLeft: 10 }}
onPress={() => navigation.openDrawer()}
/>
</View>
);
const styles = StyleSheet.create({
container: {
borderBottomWidth: 2,
height: 70,
paddingTop: 20,
},
});
DetailScreen.tsx
import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import { NavigationScreenProps } from "react-navigation";
import { CustomHeader } from '../components/Header';
export class ChangeAccountDetailScreen extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<CustomHeader navigation={this.props.navigation} />
<Text style={{ fontSize: 20 }}>Profile Screen</Text>
</View>
);
}
}
在detailscreen中,我得到以下错误:
Property 'navigation' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
我搜索了这个问题,我知道它有一个问题,即我没有在CustomHeader中声明类型.然而,我不知道如何解决这个问题.我对打字有点陌生.有人能给我解释一下如何解决这类问题吗?