React-Native 组件的导出和导入

在React-Native 中如何自己定义一个组件是一件非常容易的事情。

下面是构建组件的几种方式。

在es6中主要的关键词 export default 进行修饰、之后我们就可以把自定义的组件被导出去了。

在es5中主要使用 module.exports=HelloComponent; 进行组件的导出

一、组件的导出

第一种方式：（es6）

[javascript]  view plain  copy

1. /** 
2.  * es6 组件的创建 
3.  */  
4.  export  default class HelloComponent extends Component{  
5.   
6.      render(){  
7.          return(  
8.              <Text>Hello.{this.props.name}</Text>  
9.          )  
10.      }  
11.  }  

第二种方式：（es5）

[javascript]  view plain  copy

1. /** 
2.  * es 5  组件的创建 
3.  */  
4. var HelloComponent=React.createClass({  
5.     render(){  
6.         return(  
7.             <Text>Hello.{this.props.name}</Text>  
8.         )  
9.     }  
10. });  
11.   
12. module.exports=HelloComponent;  

第三种方式：（函数式）

[javascript]  view plain  copy

1. /** 
2.  * 函数式 组建的创建 
3.  * 无状态，无法使用this 
4.  */  
5. function HelloComponent(props) {  
6.     return  <Text>Hello.{props.name}</Text>;  
7. }  
8. module.exports=HelloComponent;  

二、组件的导入

import HelloComponent from "./hello"

在进行导入时 使用关键字 import  from  、便可以把一个组件进行导入  

注意： from “ ./”  路径的书写

./  当前目录下（同一级目录）

../  父级目录

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/GL_MINE_CSDN/article/details/72676651