Требовать JSX в реагенте

Question

Как вам нужен JSX в React Native?

var MyScreen = require ('./ apps/screens/LoadingScreen');

Требование файла .js в этом случае работает, но файл .jsx не найден.

Answer 1

Я могу ошибаться, но после того, как трала через исходный код это выглядит как только 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 2

Я думаю, вам просто нужно переименовать файл f rom .jsx в .js, и процесс сборки позаботится о любом преобразовании. Ответ Колина, похоже, подтверждает это.

Пример JSX в файле .js показан в http://moduscreate.com/react-native-has-landed/.

Команда React продолжает поощрять использование JSX: http://facebook.github.io/react/docs/jsx-in-depth.html.

Answer 3

Вот как я решил его с быстрым хака: открытой [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 добавить эти 2 строки:

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

Это сделает упаковщик распознающим mymodule.jsx файлов, когда вы сделаете что-то вроде require("mymodule")

Примечания: фактические строки из последней 0.17 выпуска, в других выпусках линия может отличаться

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