ReactNative基礎-建立元件的三種方式
阿新 • • 發佈:2019-02-16
方式一 ES6建立元件的方式
export default class HelloComponent extends Component {
render() {
return (<Text style={{fontSize:20,backgroundColor:'red'}}>Hello sun</Text>);
}}
方式二 ES5建立元件的方式
var HelloComponent=React.createClass({
render() {
return ( <Text style={{fontSize:20,backgroundColor :'red'}}>Hello ES5建立元件的方式</Text> );
}
})
module.exports=HelloComponent; //匯出
方式三 函式式
- 無狀態,無法使用this,因為其沒有指標,沒有生命週期方法
- pros 為函式的引數
通過使用{pros.name}來獲得從index.js中傳過來的值,
function HelloComponent(pros){ return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello 函式式 {pros.name}</Text> ); } module
在index.js中
import HelloComponent from './HelloComponent' //加入此行 export default class simple extends Component { render() { return ( <View style={styles.container}> <HelloComponent name = "小明"/> //使用HelloComponent元件 </View> ); } }
第一種和第二種方式也可以通過{this.pros.name}來獲得index.js中傳過來的值