如何允许react-native启用对JSX(扩展)文件的支持

Question

React Native应用程序无法解析组件.

我正在尝试导入和渲染Test.jsx内部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

项目经理(或者说文件)看起来像这样 -

测试代码.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,
  },
});

我确实尝试过所提到的每一个解决方案 - 反应原生#4968并且它们似乎都不起作用.我也提到了这一点,但是,解决方案是css,并且无法解决这个问题.

我已经看了很多问题,而且不知道我还有什么需要做的.我还创建了一个新项目(截图和代码来自新项目).

我错过了什么？

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

Answer 1

我正在使用react-native 0.59和metro-react-native-babel-preset": "^0.53.0",。

该./rn-cli.config.js文件在IOS发行版中不再起作用。RN 0.59 在根级别需要一个名为metro.config.js的配置文件。我必须使用它来启用JSX支持而不是rn-cli.config.js。查看配置文件的文档：https : //facebook.github.io/metro/docs/en/configuration.html

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        sourceExts: ['jsx','js', 'json', 'ts', 'tsx']
    }
};

Answer 2

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

// ./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'],
    },
  };

要获取更多参考，请查看以下内容：

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

Answer 3

似乎配置架构在0.57版本中已更改:#248

试试这个:

// ./rn-cli.config.js
module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js'],
  },
};

Answer 4

如果有人不想加载默认配置并传播它，那么他们可以简单地使用这个

在metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: [
      'js', // note this has to be defined first or you get an error
      'json',
      'jsx',
      'mjs',
      // required because the react-native cli ignores `resolverMainFields`
      'ts',
      'tsx',
    ],
  },
};