如何允许 react-native 启用对 JSX(扩展)文件的支持 [英] How to allow react-native to enable support for JSX (extension) files

问题描述

React Native 应用无法解析组件.

React Native app fails to resolve components.

我正在尝试导入 &在 App.js 内部渲染 Test.jsx.

I am trying to import & render Test.jsx inside of App.js.

我收到以下错误-

error: bundling failed: Error: Unable to resolve module `./screens/Test` from App.js`:
The module `./screens/Test` could not be found from App.js. Indeed, none of these files exist

项目经理(或者更确切地说是文件)看起来像这样-

Project Manager(or rather files) look like this-

Test.js 代码-

Code of Test.js-

import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native'

export default class Test extends Component {
    render() {
      return (
        <View style={styles.container}>
          <Text>Hello World?</Text>
        </View>
      );
    }
  }


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

App.js 代码-

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Test from "./screens/Test";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Test />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我确实尝试了提到的所有解决方案 - react-native#4968它们似乎都不起作用.我还提到了 this，但是，解决方案是针对 css 的，远不及解决此问题的方法.

I've literally tried every solution mentioned - react-native#4968 and none of them seem to work. I've also referred to this, but, the solution is for css and nowhere close to what would fix this issue.

我已经查看了更多的问题，所以我不知道我还需要做什么.我还创建了一个新项目(截图和代码来自新项目).

I've looked at lot more issues and SO's with no clue what else I have to do. I've also created a new project(screenshot and code is from the new project).

我错过了什么?

更新:我意识到问题是因为我有 .jsx 扩展名..js 文件的导入工作正常.关于如何使项目接受 .jsx 导入的任何指示?

UPDATE: I realised that the issue was because I have .jsx extension. Imports are working fine for .js file. Any pointers on how to enable the project to accept .jsx for imports?

推荐答案

update: for RN >0.59 正如@RedGaint 在 https://stackoverflow.com/a/55134051/8034782 你需要在root级别配置metro.config.js.

update: for RN >0.59 as @RedGaint pointed in https://stackoverflow.com/a/55134051/8034782 you need to configure metro.config.js in the root level.

  module.exports = {
  resolver: {
    /* resolver options */
   sourceExts: ['jsx','js'] //add here 
  },
  transformer: {
    /* transformer options */
  },
  serializer: {
    /* serializer options */
  },
  server: {
    /* server options */
  }

  /* general options */
};

对于 RN <0.57:在项目的根目录中添加一个名为 rn-cli.config.js 的文件，并将以下代码放入其中.

For RN < 0.57: Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.

// ./rn-cli.config.js
module.exports = {
  /// @description Allows you to enable support for JSX files
  /// The `index.js` file in the root of your project has to be `.js`. 
  getSourceExts: () => [ 'jsx', 'js' ],
}

对于 RN > 0.57:

  module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js'],
    },
  };

有关此问题的更多参考，已经打开了一个问题:

for more reference look into this there is already an issue opened:

https://github.com/facebook/react-native/pull/5233#issuecomment-382083236

这篇关于如何允许 react-native 启用对 JSX(扩展)文件的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！