web-dev-qa-db-fra.com

comment résoudre la propriété 'navigation' n'existe pas sur le type 'Readonly <{}> &

J'ai les deux morceaux de code suivants:

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>
    );
  }
}

Dans l'écran de détails, j'obtiens l'erreur suivante:

La propriété 'navigation' n'existe pas sur le type 'Readonly <{}> & Readonly <{children?: ReactNode; }> '.

J'ai cherché le problème et je comprends qu'il a quelque chose du fait que je ne déclare pas de type dans mon CustomHeader. Cependant, je ne sais pas comment résoudre ce problème. Je suis un peu nouveau sur TypeScript. Quelqu'un pourrait-il m'expliquer comment résoudre ce problème de type?

typescriptreact-nativereact-navigation
6
Lotusin

Voici une autre solution où j'ajoute plus de détails dans la définition de l'interface

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