开发者社区> 码莎拉蒂> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React Native之导出

简介: React Native之导出
+关注继续查看

1 React Native里面一般导出函数或者常量或者组件

  如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下

  导出

1. export default class Student {
2.   }

  导入

 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'}}>
              <Text
              onPress={() => 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 运行结果

20170724223902569.png

20170724223902569.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《React Native移动开发实战》出版啦
对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了。
1740 0
《React Native移动开发实战》一一3.3 完善轮播广告——Image组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1711 0
《React Native移动开发实战》一一1.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
918 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1176 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1862 0
《React Native移动开发实战》一一1.2 React Native的特点
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2082 0
《React Native移动开发实战》一一1.1 看透React Native
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1959 0
《React Native移动开发实战》一一2.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1107 0
《React Native移动开发实战》一一3.9 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.9节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1369 0
+关注
码莎拉蒂
CSDN博客专家、CSDN全网排名40名左右,累计访问700万左右, Android领域优质创作者, 华为云享专家、阿里云社区博客专家、国内知名互联网游戏公司程序员,涉猎于前端、移动端、服务端、云计算等多个领域,为友盟、华为云、京东云、java服务端开源项目.公众号【码莎拉蒂】
347
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载