React-Native 學習筆記（一）

學習RN的學習筆記，記錄下來分享於你們～

來源： 官網 + 其餘資料
複製代碼

1、寬&高

像素無關

React Native 中的尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點(設備獨立像素)。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}
複製代碼

運行在不一樣平臺回呈現不一樣的單位，若是是在android上，100表示100dp，若是100修飾字體，則替換爲是100sp。若是是運行在了ios上則100表示100pt。這樣確保了咱們的佈局在不一樣的手機上不會發生變化。

flex寬高

通常而言咱們會使用flex:1來指定某個組件擴張以撐滿全部剩餘的空間。

若是有多個並列的子組件使用了flex:1，則這些子組件會平分父容器中剩餘的空間。若是這些並列的子組件的flex值不同，則誰的值更大，誰佔據剩餘空間的比例就更大。

2、Flex佈局

RN中的flex佈局同咱們往常使用的CSS Flex存在一些不一樣（並不徹底同樣）。

不一樣之處

• flexDirection: 在RN中默認是column，可是在CSS中是row。
• alignItems：在RN中默認是stretch，CSS中默認是flex-start。
• 在web CSS中flex能夠設置多個參數，可是在RN中只能設置一個參數。好比：flex:1;
• 不支持屬性：align-content，flex-basis，order，flex-flow，flex-grow,flex-shrink。

一、父容器所設置的屬性

flexDirection

決定咱們佈局的排列方向。

justifyContent

能夠決定其子元素沿着主軸的排列方式。

flex-start、center、flex-end、space-around、space-between以及space-evenly。

alignItems

能夠決定其子元素沿着次軸（與主軸垂直的軸，好比若主軸方向爲row，則次軸方向爲column）的排列方式。

flex-start、center、flex-end以及stretch。

flex-wrap

決定咱們的元素可否換行。（也就是是否容許多行顯示）

wrap、nowrap

二、子視圖屬性

alignSelf

用於設置單獨子元素的alignItem對其方式。

auto、flex-start、flex-end、center、stretch。

flex

定義的咱們元素的可伸縮的屬性。

佈局屬性大全

3、建立組件的方式

一、ES6

import React, {Component} from 'react';
import {Text} from 'react-native';


export default class HelloComponent extends Component {
  render () {
    return <Text style={{color: '#ddd'}}>hello</Text>
  }
}
複製代碼

二、函數式組件

const HelloComponent = () => {
  return <Text style={{color: '#ddd'}}>hello</Text>
}
export default HelloComponent
複製代碼

三、ES5組件

var HelloComponent = React.createClass({
    render () {
      return <Text style={{color: '#ddd'}}>hello</Text>
    }
});

module.exports = HelloComponent;

複製代碼

4、生命週期(Component Lifecycle)

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命週期方法，在Android中Activity則提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命週期方法，這些生命週期方法展現了一個界面從建立到銷燬的一輩子。

在React 中組件(Component)也是有本身的生命週期方法的。

組件的生命週期分紅三個狀態：

• mounting 掛載階段
• updating 更新階段
• unmounting 卸載階段

心得：你會發現這些React 中組件(Component)的生命週期方法從寫法上和iOS中UIViewController的生命週期方法很像，React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用。

Mounting裝載階段

• getInitialState:在組件掛載以前調用一次，好比咱們一般在這裏初始化咱們的state。
• componentWillMount: 服務器端和客戶端都只調用一次，在初始化渲染執行以前馬上調用。
• componentDidMount(): 初始化渲染完成以後調用,只調用一次，僅客戶端有效（服務器端不會調用）。

UpdatIng更新階段

• componentWillReceiveProps(object nextProps): 在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。

  用此函數能夠做爲 react 在 prop 傳入以後， render() 渲染以前更新 state 的機會。老的 props 能夠經過 this.props 獲取到。在該函數中調用 this.setState() 將不會引發第二次渲染。

• shouldComponentUpdate(object nextProps, object nextState):在接收到新的 props 或者 state，將要渲染以前調用。

  該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會。若是肯定新的 props 和 state 不會致使組件更新，則此處應該 返回 false。

  心得：咱們能夠藉助該方法來實現一些優化，好比能夠根據新的props和state來決定是否須要從新渲染頁面

• componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 以前馬上調用。

  注意：你不能在該方法中使用 this.setState()。若是須要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。

• componentDidUpdate(object prevProps, object prevState): 在組件的更新已經同步到 DOM 中以後馬上被調用。

  使用該方法能夠在組件更新以後操做 DOM 元素。

UnMounting卸載

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

  在該方法中執行任何須要的清理，好比無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素。

5、React-native定義樣式

一、方式一: 內聯樣式

<Text style={{color: '#ddd'}}>hello</Text>
複製代碼

二、方式二：

import {Text,StyleSheet} from 'react-native';

export default class HelloComponent extends Component {
  render () {
    return <Text style={styles.container}>hello</Text>
  }
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#eae7ff',
    flex: 1
  }
});

複製代碼

6、React-native經常使用樣式

7、React-native View組件