React-native：React-nativeのjsxでtypescript .tsxファイルを使用（および変換）する方法？

Question

私はreactjs + typescriptから来ているReact-nativeを初めて使っています。私はかなり単純なプロジェクトテストを設定し、この技術がどのように機能するかを見ていきたいと考えています。私はVSコードを使用しています。

基本的なチュートリアルの後、私は自分のプロジェクトをセットアップして、Visual Studio Androidエミュレータで実行できます。

カスタム.tsxファイル（profile.tsxなど）の作成方法を確認し、レンダリング機能を作成し、インデックスページ（index.android.js）に表示します。

だから私は.tsxファイルを作成します（私は、ファイルの先頭に、様々なimport文を省略している）

VSコードを使用

export class Profile extend React.Component { 

     render(){ 
      return <View> this is the profile view </View> 
     } 
} 

私は、このファイルをコンパイルし、それに対応するprofile.jsを生成することができますし、 profile.js.mapファイル。

profile.jsの内容は次のとおりです。実行時に

"use strict"; 
const react_1 = require('react'); 
const react_native_1 = require('react-native'); 

... 

class Profile extent react_1.Component { 

    render(){ 
      return react_1.default.createElement(react_native_1.View, null, "this is the profile view"); 
    } 
} 

ラインreact_1。このメッセージに吹くdefault.createElement：

未定義は、この「デフォルト」のプロパティがあります

（react_1.default.createElementを評価する）オブジェクトではありませんが、私はそれがない何。

どのようにして、いくつかのjsxコードを含む.tsxファイルを作成し、反応したネイティブアプリケーションで正しく消費されるように適切に変換できますか？

• P.Sは：これは私のtsconfig.jsonファイルで、私はJSX =

を "反応する" すべてのヘルプ、提案してJSXを有効にして、方向をいただければ幸いです。 ありがとうございます。

Answer 1

現在、TSCはES6モジュールのシンタックスを翻訳しており、後でJavaScriptエンジンはデフォルトエクスポート（module.exportsに似ています）が存在しません。これは存在しません。 ES6のターゲットとモジュールでTSCを設定する必要があります。

次のようにあなたのtsconfig.jsonファイル内のコンパイラオプションを更新してみてください。

class Profile extends Component { 

    render(){ 
      return React.createElement(View, null, "this is the profile view"); 
    } 
} 

：

{ 
    "compilerOptions": { 
    "target": "es6", 
    "allowJs": true, 
    "jsx": "react", 
    "sourceMap": true, 
    "noImplicitAny": false 
    } 
} 

ES6ターゲット（それにES6へのモジュールのデフォルト）を使用すると、あなたのプロフィールクラスがにtranspiledする必要がありますまた、reactとreact-nativeタイプの定義をインストールすることを忘れないでください。糸（最新の反応固有のものを優先）またはnpm：yarn add @types/react-native @types/react -Dまたはnpm i @types/react-native @types/react -D

Answer 2

問題を解決するには、コンポーネントをインポートして*などを使用しないでください。"import *"からの反応 "react"; "

この問題は、JSと同様にtscでコンパイルすることができます。