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 “ ./”  路径的书写

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

../  父级目录