React Native之导出
1 React Native里面一般导出函数或者常量或者组件
如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下
导出
export default class Student {}
导入
import Student from "./file"
如果不是默认组件或类或则方法或则变量(没有用default修饰)的话,在另外一个地方导入的时候需要加上{},格式如下
导出:使用module.exports
module.exports = {fun1, fun2, 常量}
导入
import {xxx2, xxx2, ...} from "./file"
好处:在另外一个文件地方导入了,就可以使用导入的函数或者变量或者组件,非常方便,相当于java里面的import导入类文件一样.
还可以是用一个变量,然后变量里面放键值对数组,key是函数名字,value是函数实现
如下
let fun = {fun1 : (a, b) => {return a + b}, fun2 : (a, b) => {return a - b}} export default fun;
2 简单测试
Student.js文件如下
'use strict';import React from 'react'class Student {constructor(name: string) {this.name = name;}_getName = () => {console.log("_getName");return this.name;};
}export default Student
Fun.js文件如下
'use strict';import React from 'react'const sum = (a, b) => {return a + b;
}const sub = (a, b) => {return a - b;
}const myName = 'chenyu';module.exports = {sum,sub,myName
}
Fun_second.js文件如下
'use strict';import React from 'react'//我们把所有的函数放在一个变量里面,这个变量里面放的都是键值对,
//然后key是函数名字,value是我们函数实现
let fun = { //记得这是是let fun = { },不是let fun {} //相加函数sum : (a, b) => {return a + b; }, //相减函数sub : (a, b) => {return a - b; }
}export default fun;
App.js文件如下
import React from 'react';
import {View, Text} from 'react-native';
import {DeviceEventEmitter} from "react-native";import Student from "./Student"
import {sub, sum, myName} from "./Fun"
import fun from "./Fun_second"export default class App extends React.Component {constructor(props) {super(props); this.state = {name: '点击我',sumRes: 'sumRes',subRes: 'subRes',stuName: 'hello',sumRes_sec: 'sumRes_sec',subRes_: 'subRes_'};}render() {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><TextonPress={() => this._press(5, 2)}>{this.state.name}</Text><Text>{this.state.sumRes}</Text><Text>{this.state.subRes}</Text><Text>{this.state.stuName}</Text><Text>{this.state.sumRes_sec}</Text><Text>{this.state.subRes_}</Text></View>);}_press = (a, b) => {this.setState({name: myName});let res = sum(a, b);console.log("res is:" + res);this.setState({sumRes : res});let res1 = sub(a, b);console.log("res1 is:" + res1);this.setState({subRes : res1});let student = new Student("chengongyu");let studentName = student._getName();this.setState({stuName : studentName});let sumSec = fun.sum(4, 9);this.setState({sumRes_sec : sumSec});let subSec = fun.sub(10, 2);this.setState({subRes_: subSec});}}
3 运行结果
点击 '点击我'之后效果如下
React Native之导出相关推荐
- 【React Native】深入理解Native与RN通信原理
在使用 React Native 开发应用程序的时候,有时候需要使用 JavaScript 中默认不可用的 IOS 或 Android 的原生 API. 也许你想复用一些现有的 OC.Swift.Ja ...
- Zephyr 简介:用于 React Native 的 Tailwind CSS
使用纯 CSS 构建复杂的 Web 应用程序可能是一项艰巨的挑战. 因此,开发人员倾向于使用 Bootstrap 和 Tailwind CSS 等流行的样式库来缩短开发周期. 与 Web 上的样式类似 ...
- 开源一个天气APP Build with React Native
About Github 断断续续花了几天的时间,利用网上开放的小米天气接口,基于React native 写了一个天气APP.App store 在审核中.设计能力有限,天气动画只加了两个,AE导出 ...
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
本文原文由"恋猫月亮"原创发布,原题为<移动端跨平台开发的深度解析>,本次重新整理后,为了优化阅读体验,内容略有改动,感谢原作者的无私分享. 1.前言 跨平台一直是老生 ...
- React Native 项目简单整理-组件优化
2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...
- React Native学习总结第一天
1.0 配置React Native的开发环境 请参考 虽然过程很复杂,但是确实没啥难度(react-native init testProject) 2.0 ES6的基础语法 变量和常量声明 let ...
- react native 开发笔记(二)
1.按照前文配置好文件之后,便可以生成目录 (1)按照小兄弟的步骤生成项目:react-native init name (2)目录结构 index.ios.js和index.android.js为入 ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- React Native调用原生模块
概述 有时候App需要访问平台API,但React Native可能还没有相应的模块包装:或者你需要复用一些Java代码,而不是用Javascript重新实现一遍:又或者你需要实现某些高性能的.多线程 ...
最新文章
- 数据结构----内存分配问题
- 白话Elasticsearch69-ES生产集群部署重要的 Elasticsearch参数设置
- 合格前端系列第五弹- Virtual Dom Diff
- 剑与远征恶魔英雄瑟可斯,我们认识一下他的技能
- 如何从初级程序员变成高级程序员?赶紧看一看
- shell 文件 开头的格式
- TortoiseSVN 加锁,服务器地址更换,切换登录用户
- Ubuntu中zabbix 4.2.6监控postgresql数据库
- linux创建云主机内存不足,云主机DC2 Linux系统CPU与内存占用率高导致无法登录
- 网页设计与制作(HTML+CSS)
- DDPM代码详细解读(1):数据集准备、超参数设置、loss设计、关键参数计算
- 坚持你的梦想,什么时候都不晚!
- xinput1_4.dll丢失怎么修复?修复方法分享
- labelimg标注yolo格式Bug
- 计算机考研什么时候开始备考,2022考研什么时候开始准备最好 为什么
- 一种利用百分比布局适配所有Android手机屏幕分辨率的方法
- Oracle EBS专业术语与名词解释
- 从Masonry 源码探 Objective-C [源码学习开篇]
- 数商云:“沸腾的”数字经济大时代,平台战略提速工业数字化转型
- hp6960无法连接计算机,win10系统连接惠普6960无线打印机的方法【图文详解】
热门文章
- 《Redis核心技术与实战》学习总结(1)
- Serilog 最佳实践
- 聊一聊Load Average
- 一起学习设计模式--02.简单工厂模式
- SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤
- 分享几个亲测有效的高效工作技巧
- 明明可以靠技术吃饭,现在却非要出来当编剧!
- 超燃| 2019 中国.NET 开发者峰会视频发布
- 浅议gRPC的数据传输机制和回调机制
- 使用ASP.NET Core 3.x 构建 RESTful API - 1. 开始