React本机应用无法解析组件.

我正在try 导入&在App.js内渲染Test.jsx.

我得到以下错误-

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

项目经理(或者更确切地说是文件)如下所示-

Files

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

应用程序代码.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,
  },
});

我已经try 了上面提到的每一个解决方案——react-native#4968个,但它们似乎都不起作用.

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

我错过了什么?

UPDATE:

推荐答案

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 */
};

For 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' ],
}

For RN > 0.57:

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

欲了解更多信息,请查看以下问题:

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

React-native相关问答推荐

Redux toolkit通过按钮操作进行查询

导航到另一个屏幕后清空搜索屏幕

React Native:任务 ':app:checkDebugDuplicateClasses' 执行失败

错误:图片:找不到 ID 为1的assets资源 .请判断图像源或打包器

获取 TypeError:this.InnerNativeModule.configureProps 不是 mac 上 expo 中的函数

混合 JavaScript 移动开发 - Apache Cordova vs Capacitor with Ionic vs NativeScript vs React Native

React Native - 当位置在Android上是绝对时视图消失

Visual Studio 代码错误:-Failed to start flow Error: Wrong version of Flow. The config specifies version ^0.92.0 but this is version 0.95.1

异步(async)/等待(await)和递归

React-Native:显示加载屏幕直到加载 webview

如何解决此错误您可能需要适当的加载程序来处理此文件类型

从组件的 style属性中获取 CSS 属性值

ld:找不到-lFirebaseCore clang的库: error: linker command failed with exit code 1 (use -v to see invocation)

有没有办法改变 IOS 标题上react-navigation 的默认后退按钮 colored颜色 ?

将 svg 转换为 react-native-svg

React Native 元素搜索栏边界线未清除

在Android上更改高度时react-native TextInput显示错误

在react-native中调试应用程序崩溃

单击平面列表中的侦听器

/bin/sh: adb: 找不到命令