一、前言背景:

  学习react native的关键在于组件,依靠组件的拼接达到想要的效果,由此可见,组件就像一块块功能各异的零件,最终搭建出我们想要的效果。

  今天我们就从组件的导入、导出开始

  下面是我们编写react native代码时,很普遍的代码范式:

import React, {Component} from 'react'
import {View, Text} from 'react-native' export default class Example extends Component {
...
}

其实,这就是体现了组件的导入和导出,import导入,export导出

二、分析

(一)、问题:

  1. 如何导出组件、如何使用导出的组件(即导入)?
  2. 如何导出变量和常量,又如何使用?
  3. 如何导出方法,又如何使用?

(二)、解决

  ES6导入导出组件:

//导出Example组件
export default class Example extends Component{
...
}
//导入组件
import Example from ''./Example

  ES5导入导出组件:

//ES5导入组件
var Example = React.createClass({
...
})
module.export = Example //ES5的组件导入
var {View, Text} = require('react-native')
var Example = require('./Example')

  

  变量、常量的导入导出

//导出变量和常量
export var name = '小米'
export const age = '8'
//或者可以这样。。
var newName = '大米'
const newAge = '18'
export {newName, newAge} //导出Example组件
export default class Example extends Component{
...
}
//导入组件
import Example, {name, age, newName, newAge} from ''./Example

  方法的导入导出(同变量、常量的导入导出)

//导出变量和常量
export var name = '小米'
export const age = '8'
//或者可以这样。。
var newName = '大米'
const newAge = '18'
export {newName, newAge}
export function sum(a, b){
return a+b;
} //导出Example组件
export default class Example extends Component{
...
}
//导入组件
import Example, {name, age, newName, newAge, sum} from ''./Example

通过上面的代码可以发现:export导出和export default导出并不一样

1. export default只可导出一个,而export可以导出多个

2.export default ***导出的,导入时需要直接导入,如import ***;

而export导出的多个,导入时需要使用大括号来接收,如import {param1,param2}

三、结束

react-native 组件的导入、导出的更多相关文章

  1. React Native组件的结构和生命周期

    React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...

  2. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  3. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  4. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  5. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  6. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  7. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  8. React Native组件(三)Text组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...

  9. React Native组件(二)View组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...

  10. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

随机推荐

  1. mysql 简单级联的学习

    数据库上面一直是我的弱项,昨天突然想到,简单的级联,即一个表中的列表删除了,另外一个依赖这个表的其他数据应该也会删除,当时想了下,可以根据外键来判断把其他表的数据给删除了,但是这样一来好像要必须知道其 ...

  2. New Concept English Two 21 55

    $课文53  触电的蛇 544. At last firemen have put out a big forest fire in California. 消防队员们终于扑灭了加利福尼亚的一场森林大 ...

  3. 一个简单的观察者模式的JS实现

    这不是原创文章,主要是写给自己看的.原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到.参考http://www.cnblogs.com/TomXu/archive/2012/03/02 ...

  4. Java第四次作业--面向对象高级特性(继承和多态)

    一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握类的继承概念和设计 掌握构造方法的继承原则 掌握方法重写 掌握super键字和final关键字 理解多态的概念,掌握通过方法重写和方法重载机制 ...

  5. 20155322 2016-2017-2 《Java程序设计》第6周学习总结

    20155322 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第六周学习的主要内容是课本的第十第十一章: 第十章介绍的是输入.输出,Java中的流分为两种 ...

  6. Java进行数据库导出导入 亲测可用

    /** * @param hostIP ip地址,可以是本机也可以是远程 * @param userName 数据库的用户名 * @param password 数据库的密码 * @param sav ...

  7. 常见web安全攻防总结

    Web 安全的对于 Web 从业人员来说是一个非常重要的课题 , 所以在这里总结一下 Web 相关的安全攻防知识,希望以后不要再踩雷,也希望对看到这篇文章的同学有所帮助.今天这边文章主要的内容就是分析 ...

  8. C语言Socket编程(计算机网络作业)

    最近我计算机网络课程要做作业了,没办法跟着老师一步一步的写C语言的代码,使用的计算就是Socket通信发送消息:代码实现的功能很简单,客户端向服务器端发送消息,服务器端接收客户端发来的消息,并且输出显 ...

  9. bitmapdata的知识点

    flashplayer的cpu渲染 bitmapData占用的内存分两块,一块是原始数据区,另一块是解压后的内存区10秒内如果没有使用这个bitmapdata,解压后的内存区会被释放,当10秒后重新使 ...

  10. TimeExit 界面无点击定时退出类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...