react-native 组件的导入、导出
一、前言背景:
学习react native的关键在于组件,依靠组件的拼接达到想要的效果,由此可见,组件就像一块块功能各异的零件,最终搭建出我们想要的效果。
今天我们就从组件的导入、导出开始
下面是我们编写react native代码时,很普遍的代码范式:
import React, {Component} from 'react'
import {View, Text} from 'react-native' export default class Example extends Component {
...
}
其实,这就是体现了组件的导入和导出,import导入,export导出
二、分析
(一)、问题:
- 如何导出组件、如何使用导出的组件(即导入)?
- 如何导出变量和常量,又如何使用?
- 如何导出方法,又如何使用?
(二)、解决
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 组件的导入、导出的更多相关文章
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
随机推荐
- specialized English for automation-Lesson 3 CMOS Logic Circuit
CMOS logic is a newer technology, based on the use of complementary MOS transistors toperform logic ...
- 面试题总结(一)、TCP协议
声明:本文主要探讨当TCP协议出现在面试笔试场合可能会涉及的问题,每一个知识点讨论力求简洁,便于记忆,但讨论深度有限,如要深入研究可点击参考链接,希望对正在找工作的同学有点帮助. 一.TCP协议简介 ...
- 解决HTML加载时,外部js文件引用较多,影响页面打开速度问题
解决HTML加载时,外部js文件引用较多,影响页面打开速度问题 通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...
- iOS使用shell脚本注入混淆内容
背景 公司需要做一系列的壳版本,壳版本如果内容雷同提交到App Store会有被拒绝的风险,其中有一种解决方案是在壳版本中注入混淆的代码,防止被苹果检测到内容太过雷同而导致审核被拒绝,本文是针对这个场 ...
- js 验证手机号码
js 验证手机号码 //验证手机号 function isMobel(value) { if (/^1[3-8]+\d{9}$/g.test(value)) { ...
- Codeforces 1009D:Relatively Prime Graph
D. Relatively Prime Graph time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- Linux内核gpiolib注册建立过程
1.相关的数据结构 struct s3c_gpio_chip { // 这个结构体是三星在移植gpiolib时封装的一个结构体 用来描述一组gpio端口信息 struct gpio_chip chip ...
- cratedb joins 原理(官方文档)
JOINs are essential operations in relational databases. They create a link between rows based on c ...
- php的静态变量的实现
1.静态变量的结构 php脚本编译之后会生成执行opcode组成的opcode_array,执行每个zend_op_array都会生成一个单独的zend_execute_data结构. php的局部变 ...
- java 输出helloword
1,安装jdk;2,配置环境变量;3,新建D:/Test.java文件;4,文件内容如下:public class Test{ public static void main(String[] arg ...