React-Native 组件的导出和导入

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

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

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

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

一、组件的导出

第一种方式：（es6）

/**
 * es6 组件的创建
 */
 export  default class HelloComponent extends Component{

     render(){
         return(
             <Text>Hello.{this.props.name}</Text>
         )
     }
 }

第二种方式：（es5）

/**
 * es 5  组件的创建
 */
var HelloComponent=React.createClass({
    render(){
        return(
            <Text>Hello.{this.props.name}</Text>
        )
    }
});

module.exports=HelloComponent;

第三种方式：（函数式）

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

二、组件的导入

import HelloComponent from "./hello"

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

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

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

../  父级目录