Android：ReactNative語法基礎（下）
Prop
Prop可以理解為元件中的屬性，它可以通過外界傳遞進來的引數，類似於建構函式的引數
1、屬性引數
使用自定義元件的時候，傳遞引數到自定義元件中
<View> <PropsText name = "小明", age = 18 /> </View>
2、預設屬性
在React中可以提供預設引數 defaultProps 屬性
class PropsText extends Component{
static defaultProps = {
name: "小俊",
age: 18
}
render(){
<Text>Hello{this.props.name}</Text>
}
}
3、屬性檢測
在React中的引數中可以增加型別判斷 propTypes 屬性，如果型別不準確，則會報錯通知開發者
class PropsText extends Component{
static defaultProps = {
name: "小俊",
age: 18
}
static propTypes = {
name:PropTypes.string,
number:PropTypes.number.isRequired
}
render(){
<Text>Hello{this.props.name}</Text>
}
}
State
State可以理解為元件中的成員變數，通過改變成員變數的值去更新元件
1、初始化State
通過 getInitialState() 初始化state，在元件的生命週期中僅執行一次
getInitialState(){
return {
favorite:false
};
}
2、更新State
通過 this.setState() 方法來更新state，元件就會重新渲染，執行 render()
handleClick:function(event){
this.setState({
favorite:!this.state.favorite
});
},
render(){
var text=this.state.favorite? 'favorite':'un favorite';
return (
<div type='button' onClick={this.handleClick}>
You {text} this. Click to toggle.
</div>
);
}
ref
ref可以作為Dom節點的標識，可以獲取到某個Dom節點
1、獲取元件例項
<View>
<Text onPress={()=>{
this.refs.refText//獲取元件例項
this.refs[refText] //獲取元件例項
}}
<Text ref="refText"/>
</View>
2、獲取元件方法
<View>
<Text onPress={()=>{
this.refs.refText.getSize();//獲取元件方法
this.refs[refText].getSize(); //獲取元件方法
}}
<Text ref="refText"/>
</View>
this
在方法中使用this物件，會報錯找不到，原因是這裡的this指的是當前 _onPressItem 方法中的物件
_onPressItem() {
let navigator = this.props.navigator;
}
解決方法是在建構函式中將當前的方法的this物件進行繫結
constructor(props) {
super(props);
this.state = {}
this._onPressItem = this._onPressItem.bind(this);
}
或者在使用該方法的時候直接使用箭頭函式，能自動將this物件進行繫結
<TouchableOpacity onPress={()=>{
let navigator = this.props.navigator
}}>
</TouchableOpacity>
元件方法
1、render()
該方法表示元件建立的時候進行渲染的回撥函式。它會檢測 this.props 和 this.state ，並返回一個單子級元件
2、getInitialState()
該方法表示初始化元件狀態，在元件掛載之前呼叫一次
3、getDefaultProps()
該方法表示設定元件屬性的預設值，在元件類建立的時候呼叫一次
4、propTypes
該物件用於驗證傳入到元件的props的型別
5、statics
該物件允許你定義靜態的方法，這些靜態的方法可以在元件類上呼叫。這些方法不能獲取元件的props和state。如果你想在靜態方法中檢查 props 的值，在呼叫處把 props 作為引數傳入到靜態方法
class MyComponent extends Componet{
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
}
render: function() {
}
}
6、displayName
該字串用於輸出除錯資訊
7、isMounted()
該方法通常用於非同步任務完成後修改state前的檢查，以避免修改一個沒有被渲染的元件的state。當元件被渲染到DOM，該方法返回true，否則返回false
元件生命週期
1、Mounting(裝載)
- getInitialState(): 在元件掛載之前呼叫一次。返回值將會作為 this.state 的初始值
- componentWillMount()：伺服器端和客戶端都只調用一次，在初始化渲染執行之前立刻呼叫
- componentDidMount()：在初始化渲染執行之後立刻呼叫一次，僅客戶端有效
2、Updating(更新)
- componentWillReceiveProps()：在元件接收到新的 props 的時候呼叫
- shouldComponentUpdate()：在接收到新的 props 或者 state
- componentWillUpdate()：在接收到新的 props 或者 state 之前立刻呼叫
- componentDidUpdate()：在元件的更新已經同步到DOM中之後立刻被呼叫
3、Unmounting(移除)
- componentWillUnmount()：在元件從DOM中移除的時候立刻被呼叫
4、完整生命週期
持久化儲存
1、基礎使用
ReactNative提供 AsyncStorage 用於持久化儲存 key-value
- static getItem(key: string, callback:(error, result))：根據鍵來獲取值，獲取的結果會在回撥函式中
- static setItem(key: string, value: string, callback:(error))：根據鍵來設定值
- static removeItem(key: string, callback:(error))：根據鍵來移除項
- static mergeItem(key: string, value: string, callback:(error))：合併現有值和輸入值
- static clear(callback:(error))：清除所有的專案
- static getAllKeys(callback:(error, keys))：獲取所有的鍵
- static flushGetRequests()：清除所有進行中的查詢操作
- static multiGet(keys, callback:(errors, result))：獲取多項資料，keys是字串陣列
- static multiSet(keyValuePairs, callback:(errors))：設定多項，keyValuePairs是字串的二維陣列
- static multiRemove(keys, callback:(errors))：刪除多項，keys是字串陣列
- static multiMerge(keyValuePairs, callback:(errors))：多個鍵值合併，keyValuePairs是字串的二維陣列
2、封裝使用
import {
AsyncStorage
}from 'react-native';
export default class StorageUtils{
static get(key) {
return AsyncStorage.getItem(key).then((value) => {
const jsonValue = JSON.parse(value);
return jsonValue;
});
}
static save(key, value) {
return AsyncStorage.setItem(key, JSON.stringify(value));
}
static update(key, value) {
return DeviceStorage.get(key).then((item) => {
value = typeof value === 'string' ? value : Object.assign({}, item, value);
return AsyncStorage.setItem(key, JSON.stringify(value));
});
}
static delete(key) {
return AsyncStorage.removeItem(key);
}
}
佈局
1、畫素
在React Native中尺寸是沒有單位的，它代表了裝置獨立畫素。執行在Android上時，長和寬的尺寸單位被解釋為dp，字型的尺寸單位被解釋為sp，執行在iOS上時，尺寸單位被解釋為pt
2、flexBox
約束父檢視的屬性
- flexDirection：屬性定義了父檢視中的子元素沿橫軸或側軸方片的排列方式
- flexWrap：屬性定義了子元素在父檢視內是否允許多行排列，預設為nowrap
- justifyContent：屬性定義了子元素的主軸的對齊方式
- alignItems：屬性定義了子元素的側軸的對齊方式
約束子檢視的屬性
- alignSelf：屬性定義了flex容器內被選中專案的對齊方式
- flex：屬性當前元素的位置的佔比權重，預設為0
其他屬性
- 尺寸：可以定義容器的寬高
- 邊框：可以定義容器的上下左右的邊框和顏色
- 內邊距：可以定義容器的上下左右的內邊距
- 外邊距：可以定義容器的上下左右的外邊距
- 定位：可以定義容器的絕對位置或相對位置
除錯
1、日誌除錯
可以通過不同級別的日誌就行輸出除錯
console.warn() console.error()
2、Chrome除錯
在開發中遇到最大的問題是Window下的Chrome除錯，嘗試了很久後終於找到可除錯的辦法
- 搖一搖開啟除錯選單，選擇 Debug JS Remotely
- 在彈出來的Chrome中將ip地址改為 localhost ，重新整理Chrome
- 搖一搖開啟除錯選單，選擇 Reload
- F12開啟開發者介面，進行斷點除錯