React-native typescript：找不到变量：React

Question

慢慢尝试将 typescript 集成到我的 React-Native 项目中。语法和所有适用于 ts + tslint + tsconfig，但我的应用程序无法编译。

我的 Button.tsx：

import * as React from 'react'
import { Text, TouchableOpacity, StyleSheet} from 'react-native'

interface ButtonProps {
    txtColor: string
    bgColor: string
    onPress: (e: any) => void
    children: any
}

class Button extends React.Component<ButtonProps, {}> {

    render () {
        const styles =  StyleSheet.create({
            textStyle: {
                alignSelf: 'center',
                color: this.props.txtColor,
                fontSize: 16,
                fontWeight: '900',
                paddingTop: 10,
                paddingBottom: 10
            },
            buttonStyle: {
                flex: 1,
                borderRadius: 75,
                height: 45,
                backgroundColor: this.props.bgColor
            }
        })

        return (
            <TouchableOpacity onPress={this.props.onPress} style={styles.buttonStyle}>
                <Text style={styles.textStyle}>
                    {this.props.children}
                </Text>
            </TouchableOpacity>
        )
    }
}

export { Button }

它转译成这个，在 Index.js 中导入：

Button.js：

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
exports.__esModule = true;
var react_1 = require("react");
var react_native_1 = require("react-native");
var Button = /** @class */ (function (_super) {
    __extends(Button, _super);
    function Button() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Button.prototype.render = function () {
        var styles = react_native_1.StyleSheet.create({
            textStyle: {
                alignSelf: 'center',
                color: this.props.txtColor,
                fontSize: 16,
                fontWeight: '900',
                paddingTop: 10,
                paddingBottom: 10
            },
            buttonStyle: {
                flex: 1,
                borderRadius: 75,
                height: 45,
                backgroundColor: this.props.bgColor
            }
        });
        return (<react_native_1.TouchableOpacity onPress={this.props.onPress} style={styles.buttonStyle}>
                <react_native_1.Text style={styles.textStyle}>
                    {this.props.children}
                </react_native_1.Text>
            </react_native_1.TouchableOpacity>);
    };
    return Button;
}(react_1.Component));
exports.Button = Button;

在 Index.js 中这样导入：

export * from './Button';

但是，在编译时，我遇到了Button.js:37:16 中的错误：

Can't find variable: React

可能出了什么问题？它是 .js 和 .tsx 文件的混合体吗？但是，它正在导入纯 Javascript 文件，所以我看不出问题出在哪里。

Package.json 依赖项：

  },
  "devDependencies": {
    "@types/react": "16.0.29",
    "jest-expo": "21.0.2",
    "react-native-debugger-open": "0.3.15",
    "react-native-scripts": "1.5.0",
    "react-test-renderer": "16.0.0-alpha.12",
    "remote-redux-devtools": "0.5.12",
    "remotedev-rn-debugger": "0.8.3",
    "redux-logger": "3.0.6"
    "typescript": "2.6.2"
  },
  "dependencies": {
    "axios": "0.17.1",
    "expo": "21.0.0",
    "firebase": "4.7.0",
    "mobx": "3.4.1",
    "mobx-react": "^4.3.5",
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.4",
    "react-native-loading-spinner-overlay": "0.5.2",
    "react-native-modal": "4.1.1",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "redux-promise": "0.5.3",
    "redux-thunk": "2.2.0"
  }
}

Answer 1

我检查了你的代码，我觉得一切都很好。

我认为您使用的 React 不支持 @types/react

yarn add @types/react
//or
npm install --save @types/react

这可能会帮助您在代码中使用 typescript 设置 React。