Отсутствуют реквизиты компонентов при комбинировании реагирования и навигации

Question

Я столкнулся с проблемой в моей кодовой базе React Native, где объединены react-navigation и redux. Я могу воспроизвести, используя шаблон expo init машинописный текст. Я знаю, что использование react-nagivation и redux в этом примере бесполезно.

Я обновил проект следующими файлами:

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^33.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@types/react": "^16.8.6",
    "@types/react-native": "^0.60.0",
    "@types/react-navigation": "^3.0.7",
    "@types/react-redux": "^7.1.1",
    "babel-preset-expo": "^5.2.0",
    "typescript": "^3.5.2"
  },
  "private": true
}

App.tsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux'

import HelloWorld from './helloWorld';

const testReducer = (state = [], action) => {
  return state;
}

const store = createStore(combineReducers({testReducer}));

export default function App() {
  return (
    <Provider store={store}>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <HelloWorld text="Hello world" />
      </View>
    </Provider>
  );
}

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

helloWorld.tsx

import React from 'react';
import { Text } from 'react-native';
import { NavigationScreenProp, withNavigation } from 'react-navigation';
import { connect } from 'react-redux';

interface HelloWorldProps {
  text: string
}

interface Props extends HelloWorldProps {
  navigation: NavigationScreenProp<any>;
}

export class HelloWorld extends React.Component<Props> {
  public render() {
    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default withNavigation(connect()(HelloWorld));

При компиляции этого кода с использованием tsc я получаю следующую ошибку:

App.tsx:19:10 - error TS2322: Type '{ text: string; }' is not assignable to type 'IntrinsicAttributes & Pick<NavigationInjectedProps<NavigationParams>, never> & { onRef?: Ref<any>; } & { children?: ReactNode; }'.
  Property 'text' does not exist on type 'IntrinsicAttributes & Pick<NavigationInjectedProps<NavigationParams>, never> & { onRef?: Ref<any>; } & { children?: ReactNode; }'.

19         <HelloWorld text="Hello world" />
            ~~~~~~~~~~


Found 1 error.

Почему я получаю эти ошибки?

Ошибка компиляции исчезнет, ​​если я удалим @types/react-navigation и @types/react-redux.

Answer 1

Вы экспортируете HelloWorld как именованный экспорт, а не экспорт по умолчанию.Вы хотите сделать:

export default class HelloWorld {

или

import { HelloWorld } from ...