2

私はreactjs + typescriptから来たReact-nativeが初めてです。かなり単純なプロジェクト テストをセットアップし、このテクノロジがどのように機能するかを確認しようとしています。私はVSコードを使用しています。

基本的なチュートリアルに従って、プロジェクトをセットアップし、Visual Studio Android Emulator で実行できるようにしました。

ここで、カスタム .tsx ファイル (profile.tsx など) を作成し、レンダリング関数を記述して、インデックス ページ (index.android.js) に表示する方法を確認したいと思います。

そこで、.tsx ファイルを作成します:(ファイルの先頭にあるさまざまなインポート ステートメントを省略しました)

export class Profile extend React.Component {

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

VS Code を使用して、このファイルをコンパイルし、対応する 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は次のメッセージで爆発します:

undefine はオブジェクトではありません (react_1.default.createElement を評価します)

この「デフォルト」プロパティがありますが、それが何であるかはわかりません。

では、いくつかの jsx コードを含む .tsx ファイルを作成し、それを適切に変換して、反応ネイティブ アプリケーションで適切に使用するにはどうすればよいでしょうか?

  • PS: これは私の tsconfig.json ファイルです。jsx="react"で jsx を有効にしました。

どんな助け、提案、指示も大歓迎です。ありがとうございました。

4

2 に答える 2