Question

我是来自reactjs + typescript的React-native的新手。我正在尝试建立一个相当简单的项目测试，看看这项技术是如何工作的。我正在使用VS Code。

按照基本教程，我已经设置了我的项目，我可以在Visual Studio Android模拟器中运行它。

现在我想了解如何创建自定义.tsx文件（比如profile.tsx），编写渲染函数并在索引页面上显示它（index.android.js）。 / p>

所以我创建了一个.tsx文件:(我在文件开头省略了各种import语句）

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文件并正确转换它以便在本机应用程序中正确使用？

P.S：这是我的tsconfig.json文件，我用 jsx =“react”启用了jsx

任何帮助，建议，方向将不胜感激。谢谢。

Answer 1

现在TSC正在编译ES6模块语法，后来JavaScript引擎期待默认导出（类似于module.exports），这是不存在的。您应该使用ES6目标和模块配置TSC。

尝试更新tsconfig.json文件中的编译器选项，如下所示：

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

使用ES6目标（模块默认为ES6），您的Profile类应转换为：

class Profile extends Component {

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

还要记得安装react和react-native类型定义，使用yarn（最好使用最新的react-native）或npm：yarn add @types/react-native @types/react -D或npm i @types/react-native @types/react -D

Answer 2

通过避免导入组件并使用*例如解决了该问题。＆＃34; import * as React from＆＃34; react＆＃34 ;;＆＃34;

这个问题可以来自JS编译与tsc。

React-native：如何在React-native中使用（和翻译）带有jsx的typescript .tsx文件？

2 个答案: