Question

你如何在React Native中使用JSX？

var MyScreen = require（'./ apps / screens / LoadingScreen'）;

这种方式需要.js文件，但找不到.jsx文件。

Answer 1

我认为您可能只需将文件从.jsx重命名为.js，构建过程将负责任何转换。科林的答案似乎证实了这一点。

.js文件中的JSX示例显示在http://moduscreate.com/react-native-has-landed/中。

React团队继续鼓励使用JSX：http://facebook.github.io/react/docs/jsx-in-depth.html。

Answer 2

以下是我通过快速黑客解决它的方法：打开[YOU_PROJECT_FOLDER]/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/index.js并编辑第55行，看起来像这样

extensions: extensions || ['jsx', 'js', 'json'],

打开[YOU_PROJECT_FOLDER]/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js，然后在第333行添加以下两行：

  } else if (this._fastfs.fileExists(potentialModulePath + '.jsx')) {
    file = potentialModulePath + '.jsx';

当您执行mymodule.jsx

之类的操作时，这会使打包程序识别require("mymodule")个文件

注意：实际行来自最新的0.17版本，在其他版本中行可能不同

Answer 3

我可能错了，但在浏览源代码后，看起来只支持js和json：

this._moduleExtPattern = new RegExp(
  '\.(' + ['js', 'json'].concat(this._assetExts).join('|') + ')$'
);

https://github.com/facebook/react-native/blob/8b93b99d4a769f86fffc95d65434f2f6a3fd827d/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js#L68

这个问题似乎支持：

https://github.com/facebook/react-native/issues/231

Answer 4

要使用 jsx 文件，我必须将jsx扩展名添加到下一个文件

node_modules/react-native/packager/react-packager/src/node-haste/index.js

第148行

extensions: extensions || ['js', 'jsx', 'json']

然后更改文件

node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/ResolutionRequest.js

最后这是第447行

} else if (this._platform != null && this._fastfs.fileExists(potentialModulePath + '.' + this._platform + '.jsx')) { file = potentialModulePath + '.' + this._platform + '.jsx';

这是第457行

} else if (this._fastfs.fileExists(potentialModulePath + '.jsx')) { file = potentialModulePath + '.jsx';

此解决方案适用于最新的0.39版本

在React-Native

4 个答案: