Как объявить реагирующий аргумент навигации машинописью?

Question

Я хочу использовать typescript с моим react hook компонентом.

Я использую react-navigation для моего маршрутизатора.

Создать проект с npx react-native init MyTSProject --template react-native-template-typescript@6.2.0

версия

"react": "16.8.6",
"react-native": "0.60.5",

Вот что я пытаюсь

RootScreen.tsx

import React from 'react';

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

interface IRootScreen {
  navigation: () => void;
}

const RootScreen: React.FC<IRootScreen> = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('MainStack')}>
        <Text style={{ fontSize: 40 }}>I am RootScreen</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default RootScreen;

Я могу успешно перейти к MainStack.

Но navigation.navigate('MainStack') покажет type () => void no argument navigate в моем редакторе Visual Studio Code.

Что-то не так с моим интерфейсом или мне все еще нужно что-то делать с кодом?

Любая помощь будет признательна .

Answer 1

Но навигатор.navigate ('MainStack') будет показывать тип () => void без аргументов для навигации по

Так как вы определили тип navigation проп:

interface IRootScreen {
 navigation: () => void;
}

Вам необходимо использовать NavigationStackProp:

import { NavigationStackProp } from 'react-navigation-stack';

interface IRootScreen {
  navigation: NavigationStackProp;
};

Читать официальные документы: https://reactnavigation.org/docs/en/typescript.html

Answer 2

Нашли решение

import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

interface IRootScreen {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}