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

我检查了你的代码，一切对我来说都很好。

我认为您在不支持@ types / react

的情况下使用React

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

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

React-native typescript：无法找到变量：React

1 个答案: