ES6 导出组件或属性
- ES6 导出属性
- 匿名方式
// 定义:匿名对象存放所需要的属性
// CommonData.js
export default{
title:"cralos",
age:20,
}
//引用:引用匿名对象
//test.js
//此处的Data可以定义任意名称来指向CommonData.js
import Data from "./CommonData.js"
console.log(Data.title);
- 固定方式
// 定义:定义一个常量对象存放所需要的属性
// CommonData.js
export const CommData={
title:"cralos",
age:20,
}
//引用:引用固定对象
//test.js
//此处的CommData必须和CommonData.js定义的保持一致,并且加大括号
import {CommData} from "./CommonData.js"
console.log(Data.title);
- ES6 导出组件
//引入属性类型
import PropTypes from 'prop-types';
eg: 常见类型
width: PropTypes.number,
onPress: PropTypes.func,
containerStyle: PropTypes.any,
source: Image.propTypes.source,
rounded: PropTypes.bool,
title: PropTypes.string,
//属性的任意一个类型
component: PropTypes.oneOf([
View,
TouchableOpacity,
TouchableHighlight,
TouchableNativeFeedback,
TouchableWithoutFeedback,
]),
1、const 类型
const CommonComponent=props=>{
//1、定义属性
const{
title,
titleStyle,
onPress,
...attributes
}=props;
//2、定义属性的类型限制
CommonComponent.propTypes={
title:PropTypes.string,
titleStyle:Text.propTypes.style,
onPress:PropTypes.func,
}
//3.1、返回组件视图
return(
<View>
{renderContent()}
</View>
);
//3.2、渲染视图
const renderContent=()=>{
if(title){
return(
<Text
onPress={onPress}
style={[styles.title,titleStyle && titleStyle]}
> {title}</Text>
);
}
//4、定义视图的样式
const styles = StyleSheet.create({
title:{fonsize:13}
})
};
//5、导出该组件
export default CommonComponent;
- 组件类型
import React, { Component } from 'react';
import { Text } from 'react-native';
class HelloWorldComponent extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
export HelloWorldComponent