创建 MyComponent.js :
- ES6 方式创建：
export default 的作用是导出该类，以供外面使用。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class MyComponent extends Component {
render() {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {this.props.name}</Text>
}
}
- ES5 方式创建：（测试不通过。。。但是学习视频通过，估计已经不可用。）
module.exports 的作用是导出该类，以供外面使用。
var MyComponent=React.createClass({
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello </Text>
}
})
module.exports = MyComponent;
- 函数式（无状态，不能使用this）
module.exports 的作用是导出该类，以供外面使用。
function MyComponent(props) {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {props.name}</Text>
}
module.exports = MyComponent;
无参数的写法：
function MyComponent() {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
}
module.exports = MyComponent;
App.js 代码：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
} from 'react-native';
import MyComponent from './MyComponent.js';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<MyComponent name="yococo"/>//使用指定的Componet
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5fcff',
marginTop: 80,
}
});
