2

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

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

现在我想看看如何创建一个自定义的 .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 文件并正确转换它以便在 react-native 应用程序中正确使用呢？

  • PS：这是我的 tsconfig.json 文件，我用jsx="react"启用了 jsx

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

4

2 回答 2

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

于 2016-12-15T11:36:42.257 回答
0

通过避免导入组件并使用 * 例如 "import * as React from "react"; 解决了这个问题

这个问题也可能来自使用 tsc 编译的 JS。

于 2017-04-19T06:03:15.820 回答