在React-Native中需要JSX

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';

當你執行require("mymodule")類的操作時，這將使打包器識別mymodule.jsx文件

注意：實際行來自最新的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版本