RN----导入组件，import from 'xxxx'的用法详解

淡淡的烟草味﹌ 2022-07-11 05:38 225阅读 0赞

作为一个初学者，在如何导入自己写的组件时，也容易犯怵，一个简单的import问题也搞了我大半天，import的方式五花八门，细看下图吧

![Center][]

就挑几种在RN中，特别是初学期常用的方式来说说：

**1.import React ,\{ Component \} from 'react';**

这是RN 0.26后导入React的方式，这意思是，导入‘react’文件里export的一个默认的组件，将其命名为React以及Component这个非默认组件

2.import Home from './compoments/Home';

这是导入‘**compoments/Home**’文件里export的带default关键字的组件，即默认组件,将其命名为Home(可以自定义命名)

![Center 1][]

**3.import \{ Home \} from './compoments/Home';**

导入‘compoments/Home’文件里export的叫Home的非默认组件，注意，非默认，以及命名Home

4.import \{ Home , Discover \} from './compoments/Home';

跟3的差不多，不过是\{ \},可以导入多个组件，用，隔开就可以

**5.import \* as Home from'./compoments/Home';**

意思是将./compoments/Home'文件里的所有非默认组件，全部集结成一个Home模型组件，命名可以自定义，然后可以通过点语法，来使用组件里面的所有export的组件，例如：

**![Center 2][]**

这几种都是常用的import方式，更多的详细的可以访问[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import][https_developer.mozilla.org_en-US_docs_Web_JavaScript_Reference_Statements_import]去了解和学习。。。

[Center]: /images/20220711/2465f62102b9440590ee89f2b27efcfd.png
[Center 1]: /images/20220711/eaf946f0d1544588962f460c4ec79084.png
[Center 2]: /images/20220711/3254e84c0a4f4bd0851dff160e7220fd.png
[https_developer.mozilla.org_en-US_docs_Web_JavaScript_Reference_Statements_import]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python模块导入问题：正确使用import和from

在Python中，理解和正确使用`import`语句和`from...import...`结构是非常重要的。这里分别给出这两种方式的解释： 1. `import module

秒速五厘米/ 2024年12月15日 19:36/ 0 赞/ 20 阅读

相关 vue中的默认import 导入和函数导入（在vue中，有的导入用import xxx from ‘@/xxx/xxx‘，有的导入用import {xxx} from ‘@/xxx/xxx‘）

问题：在vue中，有的导入用import xxx from ‘@/xxx/xxx’，有的导入用import \{xxx\} from '@/xxx/xxx’这两种有什么区别，什

深碍√TFBOYSˉ_/ 2024年02月17日 12:07/ 0 赞/ 23 阅读

相关 pycharm from import导入模块报错解决

错误是这样的我在app.py中导入froms报错 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

╰+攻爆jí腚メ/ 2023年06月16日 03:59/ 0 赞/ 28 阅读

相关 import 和from... import的作用，导入模块or导入函数

import 与 from…import 在 python 用 import 或者 from...import 来导入相应的模块。将整个模块(so

浅浅的花香味﹌/ 2022年09月12日 09:00/ 0 赞/ 309 阅读

相关 RN----导入组件，import from 'xxxx'的用法详解

作为一个初学者，在如何导入自己写的组件时，也容易犯怵，一个简单的import问题也搞了我大半天，import的方式五花八门，细看下图吧 ![Center][] 就挑几

淡淡的烟草味﹌/ 2022年07月11日 05:38/ 0 赞/ 226 阅读

相关 from_import详解

from\_import详解 Python中导入一个模块的方法，我们可以使用import，但是import只是导入了这个模块，而并没有导入我们模块中的某个属

太过爱你忘了你带给我的痛/ 2022年06月07日 13:44/ 0 赞/ 294 阅读

相关 Python导入 from lxml import etree 导入不了

问题在学爬虫，Python 版本是2.7，安装的lxml包是4.3的，在 from lxml import etree 时发现一直报错，网上查询，原来是Python版本

梦里梦外;/ 2021年09月28日 20:14/ 0 赞/ 477 阅读

相关 rn 开关组件Switch

开关组件 1、引入 import { View, Switch, StyleSheet } from "react-native";

蔚落/ 2021年07月25日 01:08/ 0 赞/ 590 阅读

相关 rn 动画组件

1、设置动画属性对象可以通过this设置全局对象 this.xx=new Animated.Value(值); 2、将动画属性

左手的ㄟ右手/ 2021年07月25日 00:34/ 0 赞/ 726 阅读

相关 rn 开关组件Switch

1、引入 import { View, Switch, StyleSheet } from "react-native"; 2、使用

我就是我/ 2021年07月24日 20:19/ 0 赞/ 553 阅读