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 ...

组合反应导航和redux

1 个答案: