React-native typescript：変数を見つけることができません：React

Question

緩慢にtypescriptを自分のReact-Nativeプロジェクトに統合しようとしています。構文とallは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にインポートされ、これにtranspiles：

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; 

.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

私はあなたのコードをチェックし、すべてが私にはよさそうです。

は、私はあなたが@タイプのサポートなしで反応させ、使用していると思う/これは、セットアップコード内のtypescriptですと反応役立つかもしれない

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

を反応させます。