在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 “ ./” 路径的书写
./ 当前目录下(同一级目录)
../ 父级目录