次の2つのコードがあります。
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>
);
}
}
詳細画面で、次のエラーが発生します。
プロパティ 'navigation'はタイプ 'Readonly <{}>＆Readonly <{children？：ReactNode;には存在しません。}> '。
問題を検索しましたが、CustomHeaderで型を宣言していないという事実があることを理解しています。しかし、私はこれを解決する方法がわかりません。私はtypescriptに少し慣れていません。誰かがこのタイプの問題を修正する方法を私に説明できますか？
私は間違っている可能性がありますnavigationが、期待されるタイプを追加してみましたか
import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import { NavigationScreenProps } from "react-navigation";
import { CustomHeader } from '../components/Header';
interface Props {
navigation: any
}
export class ChangeAccountDetailScreen extends React.Component<Props> {
render() {
return (
<View style={{ flex: 1 }}>
<CustomHeader navigation={this.props.navigation} />
<Text style={{ fontSize: 20 }}>Profile Screen</Text>
</View>
);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加