Android：ReactNative語法基礎（下）

Prop

Prop能夠理解爲組件中的屬性，它能夠經過外界傳遞進來的參數，相似於構造函數的參數

一、屬性參數

使用自定義組件的時候，傳遞參數到自定義組件中

<View>
    <PropsText
        name = "小明",
        age = 18
    />
</View>
複製代碼

二、默認屬性

在React中能夠提供默認參數defaultProps屬性

class PropsText extends Component{
    
    static defaultProps = {
        name: "小俊",
        age: 18
    }
    
    render(){
        <Text>Hello{this.props.name}</Text>
    }
}
複製代碼

三、屬性檢測

在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能夠理解爲組件中的成員變量，經過改變成員變量的值去更新組件

一、初始化State

經過**getInitialState()**初始化state，在組件的生命週期中僅執行一次

getInitialState(){
    return {
        favorite:false
    };
}
複製代碼

二、更新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節點

一、獲取組件實例

<View>
    <Text onPress={()=>{
        this.refs.refText  //獲取組件實例
        this.refs[refText] //獲取組件實例
    }}
    <Text ref="refText"/>
</View>
複製代碼

二、獲取組件方法

<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>
複製代碼

組件方法

一、render()

該方法表示組件建立的時候進行渲染的回調函數。它會檢測this.props和this.state，並返回一個單子級組件

二、getInitialState()

該方法表示初始化組件狀態，在組件掛載以前調用一次

三、getDefaultProps()

該方法表示設置組件屬性的默認值，在組件類建立的時候調用一次

四、propTypes

該對象用於驗證傳入到組件的props的類型

五、statics

該對象容許你定義靜態的方法，這些靜態的方法能夠在組件類上調用。這些方法不能獲取組件的props和state。若是你想在靜態方法中檢查props的值，在調用處把props做爲參數傳入到靜態方法

class MyComponent extends Componet{
  
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  }
  
  render: function() {
  
  }
}
複製代碼

六、displayName

該字符串用於輸出調試信息

七、isMounted()

該方法一般用於異步任務完成後修改state前的檢查，以免修改一個沒有被渲染的組件的state。當組件被渲染到DOM，該方法返回true，不然返回false

組件生命週期

一、Mounting(裝載)

• getInitialState(): 在組件掛載以前調用一次。返回值將會做爲this.state的初始值
• componentWillMount()：服務器端和客戶端都只調用一次，在初始化渲染執行以前馬上調用
• componentDidMount()：在初始化渲染執行以後馬上調用一次，僅客戶端有效

二、Updating(更新)

• componentWillReceiveProps()：在組件接收到新的props的時候調用
• shouldComponentUpdate()：在接收到新的props或者state
• componentWillUpdate()：在接收到新的 props 或者 state 以前馬上調用
• componentDidUpdate()：在組件的更新已經同步到DOM中以後馬上被調用

三、Unmounting(移除)

• componentWillUnmount()：在組件從DOM中移除的時候馬上被調用

四、完整生命週期

持久化存儲

一、基礎使用

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是字符串的二維數組

二、封裝使用

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);
 	}
}
複製代碼

佈局

一、像素

在React Native中尺寸是沒有單位的，它表明了設備獨立像素。運行在Android上時，長和寬的尺寸單位被解釋爲dp，字體的尺寸單位被解釋爲sp，運行在iOS上時，尺寸單位被解釋爲pt

二、flexBox

約束父視圖的屬性

• flexDirection：屬性定義了父視圖中的子元素沿橫軸或側軸方片的排列方式
• flexWrap：屬性定義了子元素在父視圖內是否容許多行排列，默認爲nowrap
• justifyContent：屬性定義了子元素的主軸的對齊方式
• alignItems：屬性定義了子元素的側軸的對齊方式

約束子視圖的屬性

• alignSelf：屬性定義了flex容器內被選中項目的對齊方式
• flex：屬性當前元素的位置的佔比權重，默認爲0

其餘屬性

• 尺寸：能夠定義容器的寬高
• 邊框：能夠定義容器的上下左右的邊框和顏色
• 內邊距：能夠定義容器的上下左右的內邊距
• 外邊距：能夠定義容器的上下左右的外邊距
• 定位：能夠定義容器的絕對位置或相對位置

調試

一、日誌調試

能夠經過不一樣級別的日誌就行輸出調試

console.warn()
console.error()
複製代碼

二、Chrome調試

在開發中遇到最大的問題是Window下的Chrome調試，嘗試了好久後終於找到可調試的辦法

• 搖一搖打開調試菜單，選擇Debug JS Remotely
• 在彈出來的Chrome中將ip地址改成localhost，刷新Chrome
• 搖一搖打開調試菜單，選擇Reload
• F12打開開發者界面，進行斷點調試