带打字稿的React-Native导航

Question

I was trying to implement react native with Typescript. while trying to access react-navigation library . Its throwing typescript errors.

Property 'navigation' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

My component.tsx

    import React, { Component } from "react";
import { View, Text, TouchableHighlight, Alert } from "react-native";
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

class FirstPage extends Component {

  public static navigationOptions = {
    title: 'Test Screen',
  };

constructor(props: any) {
    super(props);
}



_call = (firstName:string,lastName:string) => {

    Alert.alert(
        'Title',
        `${firstName} ${lastName}`,
        [
          {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
          {
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel',
          },
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        {cancelable: false},
      );
   // Alert( `$(firstname) $(lastName)`)
}


_nav=()=>
{
 this.props.navigation.navigate('second');
}

render() {

    return (
        <View>
            <Text>Hello First Page</Text>
            <TouchableHighlight onPress={()=>this._call('hello','user')} >
                <Text>Types Button</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={()=>this._nav} >
                <Text>Types Button</Text>
            </TouchableHighlight>
        </View>
    )

}

}

export default FirstPage;

Please let me know how to resolve this errors. In addition please point me towards implementing types using interfaces.

Answer 1

I think this error is due to TypeScript's strict mode and no types on your props, as it won't compile props without types in strict mode hence your error. This is because you create a new class, with a completely new constructor, and TypeScript does not know which parameters to expect.

I'm not familiar with TS and react, but you can try something like this:

interface IPropType { 
  // props goes here
  // title: string;
  // quantity: number;
}

class FirstPage extends Component<IPropType> {

constructor(props: IPropType) {
    super(props);
}

You can also import the type(s)/interfaces from a model file, it does't matter.