我得到了模块`./index.css‘无法从react本机中找到

Question

我得到的模块./index.css无法从react本地找到，

我在这个位置正确地导入了文件。在谷歌上搜索了很多，请帮忙。

这是错误的全部输出，

Body:
{"originModulePath":"/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js","targetModuleName":"./index.css","message":"Unable to resolve module `./index.css` from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`: The module `./index.css` could not be found from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`. Indeed, none of these files exist:\n\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`","errors":[{"description":"Unable to resolve module `./index.css` from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`: The module `./index.css` could not be found from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`. Indeed, none of these files exist:\n\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`"}],"name":"Error","stack":"Error: Unable to resolve module `./index.css` from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`: The module `./index.css` could not be found from `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.js`. Indeed, none of these files exist:\n\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/Users/tejas-mac/Documents/React Studio/Exported Projects/index.css/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n    at ModuleResolver.resolveDependency (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:851)\n    at ResolutionRequest.resolveDependency (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16)\n    at DependencyGraph.resolveDependency (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)\n    at dependencies.map.relativePath (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)\n    at /Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33\n    at Generator.next (<anonymous>)\n    at step (/Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)\n    at /Users/tejas-mac/Documents/React Studio/Exported Projects/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473"}
processBundleResult
    BundleDownloader.java:266
access$200
    BundleDownloader.java:35
onResponse
    BundleDownloader.java:153
execute
    RealCall.java:135
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1133
run
    ThreadPoolExecutor.java:607
run
    Thread.java:761

Answer 1

根据“反应土著文件”：

您不使用特殊的语言或语法来定义样式。您只需使用JavaScript对应用程序进行样式设置。所有核心组件都接受一个名为style的支柱。样式名称和值通常与CSS在web上的工作方式相匹配，只是名称是用骆驼大小写编写的，例如backgroundColor而不是background-color。

style道具可以是一个普通的旧JavaScript对象。

随着组件变得越来越复杂，使用StyleSheet.create在一个地方定义几种样式通常更简洁。下面是一个例子：

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

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
   }
 }

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

当然，样式不需要与组件位于同一个文件中。您可以将它们抽象到一个单独的文件中，然后简单地将它们从那里导出并在需要时导入。