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'}}>
     
    
   

    

     

    
    

     
 <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 运行结果

点击 '点击我'之后效果如下

文章来源: chenyu.blog.csdn.net，作者：chen.yu，版权归原作者所有，如需转载，请联系作者。

原文链接：chenyu.blog.csdn.net/article/details/83097464