web-dev-qa-db-ja.com

プロパティ 'navigation'を解決する方法がタイプ 'Readonly <{}>に存在しません＆

次の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は初めての方です。誰かがこのタイプの問題を修正する方法を私に説明できますか？

typescriptreact-nativereact-navigation
6
Lotusin

これは、インターフェース定義に詳細を追加する別のソリューションです

import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState
} from 'react-navigation';
import { CustomHeader } from '../components/Header';

interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>
}

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>
    );
  }
}
1
Liem
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

https://reactnavigation.org/docs/en/connecting-navigation-prop.html

0
minjie li