標籤:
轉載連結:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/
React-native是Facebook的開源項目,它的口號是"Learning once,write anywhere",目的是統一的View的編寫。
一、React-Native基本文法模板
‘use strict‘; =====>(strict 模式)
var React = require(‘react-native‘); =====>(匯入模組react-native,關鍵字是: require)
var {
AppRegistry,
StyleSheet, =====>(聲明要用到得系統組件)
Text,
View,
} = React;
var FirstApp = React.createClass({ =====>(建立組件名稱是:FirstApp, 關鍵字是createClass)
render: function() { =====>(渲染方法, 組件中必須得方法)
return (
<View style={styles.container}>=====>(這幾行就是JSX文法寫的)
<Text style={{fontSize: 18}}>這是我的第一個React Native APP</Text> =====>(顯示在手機螢幕上的內容在這寫)
</View>=====>(這裡用view包起來,而不是用div)
);
}
});
var styles = StyleSheet.create( =====>(建立樣式,看上面加粗劃線的代碼,可以在這裡定義,也可以直接寫在代碼裡面,如上面的fontSize:18)
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘orange‘
}
});
AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp); =====>(註冊應用,使能夠載入運行, FirstApp就是你的App名稱)
module.exports = FirstApp; =====>(匯出組件,使能夠在別的組件中用)
二、React-native的 組件化,我們可以把你需要的分功能自訂米快寫代碼,然後把所有的模組組合起開,就是一個完整的程式(這樣子寫代碼看起比較清晰)
代碼如下所示:
‘use strict‘;
var React=require(‘react-native‘);
var {
AppRegistry,
StyleSheet,
Text,
View
}=React;
var FirstApp=React.createClass({
render:function(){
<View style={styles.container}>
<HelloWorld myText=‘我是第一‘/>
<HelloWorld myText=‘我是第二‘/>==>(這裡引用了下一個組件,HelloWorld自動成為FiirstApp的子組件)
<HelloWorld myText=‘我是第三‘/>
</View>
}
});
var HelloWorld=React.createClass({
render:function(){
return (
<View>
<Text style={{fontSize:20,color:‘red‘}}>{this.props.myText}</Text>
=====>(從父組件傳過來的myText屬性,用this.props.myText接收)
</View>
)
}
})
三、React-Native生命週期
a、getInitialState: 在組建被掛載之前調用,我們一般在裡面定義初始state值
b、getDefaultProps: 在組件類建立的時候調用一次,然後傳回值被緩衝下來。如果父組件沒有指定 getDefaultProps 中定義的屬性,則此處返回的對象中的相應屬性將會合并到 this.props
c、componentWillMount: 伺服器端和用戶端都只調用一次,在初始化渲染執行之前立刻調用
d、render: 執行視圖的渲染操作
e、componentDidMount: 在初始化渲染執行之後立刻調用一次,僅用戶端有效(伺服器端不會調用)
f、componentWillUnmount: 組件從DOM中移除時調用,一般在次方法進行必要的清理工作
組件的執行順序樣本:
‘use strict‘;
var React = require(‘react-native‘);
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var FirstApp = React.createClass({
getDefaultProps: function() {
console.log(‘getDefaultProps‘);
},
getInitialState: function() {
console.log(‘getInitialState‘)
return { };
},
componentWillMount: function() {
console.log(‘componentWillMount‘);
},
componentDidMount: function() {
console.log(‘componentDidMount‘);
},
componentWillUnmount: function() {
console.log(‘componentWillUnmount‘);
},
ender: function() {
console.log(‘render‘);
return (
<View style={styles.container}>
<HelloWorld myText=‘我是第一‘ />
<HelloWorld myText=‘我是第二‘ />
<HelloWorld myText=‘我是第三‘ />
</View>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<View>
<Text style={{fontSize: 20, color: ‘red‘}}>{this.props.myText}</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘orange‘
}
});
AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp);
module.exports = FirstApp;
react-native基礎教程(1)