javascript - React-native typescript: Nu se poate găsi variabila: React

Încet încerc să integrez TypeScript în proiectul meu React-Native. Sintaxa și totul funcționează cu ts + tslint + tsconfig, dar aplicația mea nu se va compila.

Butonul meu.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 }

Se transpilează în asta, care este importată într-un 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;

Importat astfel în Index.js:

export * from './Button';

Totuși, la compilare, mă confrunt cu eroarea în Button.js:37:16:

Can't find variable: React

Ce ar putea fi în neregulă? Este combinația de fișiere .js și .tsx? Dar importă fișierul pur Javascript, așa că nu prea pot vedea care este problema.

Dependențele din 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"
  }
}

Răspuns #1

Am verificat codul tău și totul mi se pare în regulă.

Cred că folosești React fără suport pentru @types/react

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

Acest lucru te-ar putea ajuta să configurezi React cu TypeScript în codul tău.