第一次react-native項目實踐要點總結

今天完成了個人第一個react-native項目的封包，固然其間各類環境各類坑，同時，成就感也是滿滿的。這裏總結一下使用react-native的一些入門級重要點（不涉及環境）。注意：閱讀須要語法基礎： ES6 、react 、JSX

我對react-native的理解簡而言之就是 ：react的語法 ＋ native的組件

組件的建立聲明

class HelloWorldApp extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

上面代碼定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。當你在其餘的組件中調用這個組件時，就會實例化這個「類」（即組件）。

注意：組件名須要大寫

組件的導出、引用與註冊

在ES6中，新增了import和export倆個關鍵字來導入導出模塊。react－native的組件也是採用的這倆個關鍵字。

倆種方式：

第一種：

導出：
export default class HelloWorldApp extends Component{
    render() {
    return (
      <Text>Hello world!</Text>
    );
  }
｝

導入：
import HelloWorldApp from "../.."

第二種：

導出：
class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

export {HelloWorldApp}

導入：
import ｛ HelloWorldApp ｝ from "../.."

1. 後綴名自動獲取（文件會獲取擁有與之相應後綴名的文件）

   在組件模塊的導入過程當中，若是這個模塊是分設備的，也就有倆個文件：xxx.android.js和xxx.ios.js，這些後綴（android和ios）是不須要的，在不一樣的設備環境中，它自動獲取相應後綴名的文件，即ios包會自動獲取xxx.ios，android包會自動獲取xxx.android。

2. 後綴名自動忽略（文件會自動忽略擁有與之不相應後綴名的文件）

   一個ios和android的公共模塊文件，即共用代碼模塊文件，命名不能加ios和android後綴，不然，ios包取不到有androis後綴的文件，android取不到有ios後綴的文件。

實例解釋上述：
如今有如下五個文件：

index.ios.js

index.android.js

say.android.js

say.ios.js

HelloWorldApp.android.js

咱們想要分別在index.ios.js 和 index.android.js引入其餘三個模塊。咱們只要在index.ios.js 和 index.android.js文件中以下寫法就行：

//這裏，index.ios.js會自動獲取say.ios.js的模塊；index.android.js會自動獲取say.android.js的模塊

import 模塊名 from "./say";

//這裏，HelloWorldApp.android.js 是一個公共模塊，index.android.js能成功獲取到./HelloWorldApp；可是index.ios.js則沒法獲取到HelloWorldApp模塊，由於index.ios.js會忽略android後綴名的模塊文件

import 模塊名 from "./HelloWorldApp"

react組件的生命週期

項目中使用組件的時候，糾結於componentWillMount,componentDidMount...，直到看到這張圖豁然開朗(so，圖是盜的)。須要注意的是，這張圖應該比較老了，其中的getDefaultProps和
getInitialState這倆個函數是ES5的寫法了，ES6語法中，constructor方法中代替了getDefaultProps／getInitialState，咱們能夠在其內直接初始化props和state。

生命週期：

1. 實例化（初始化）

   • constructor

     設置默認的props->設置默認的state

   • componentWillMount

     完成渲染以前執行，此時能夠設置state

   • render

     建立虛擬DOM，此時不能修改state

   • componentDidMount

     真實的DOM渲染完畢，此時能夠更改組件props及state

2. 存在期：(這個時候的主要行爲是狀態的改變致使組件更新)

   • componentWillReceiveProps

     組件接收到新的props,此時能夠更改組件props及state

   • shouldComponentUpdate

     操做組件是否應當渲染新的props或state，返回布爾值，首次渲染該方法不會被調用。

   • componentWillUpdate

     接收到新的props或者state後，進行渲染以前調用，此時不容許更新props或state。

   • render

     建立（更新）虛擬DOM

   • componentDidUpdate
     組件真實的DOM更新完成

3. 銷燬期：

   • componentWillUnmount
     組件被移除以前，主要用於作一些清理工做，好比事件監聽

react 的 props 和 state

1. props（屬性）

   當咱們調用這些組件時，咱們若是爲每個組件傳遞了不一樣的屬性，這個屬性就是props。好比下例中，咱們調用了HelloWorldApp組件，併爲其設置了一個date屬性，則咱們能夠在HelloWorldApp的組件裏，經過this.props.date來獲取這一屬性值。

   <HelloWorldApp date = {2016}>

2. state（狀態）

   state須要在constructor中初始化，而後經過調用setState方法修改。
   經過上面的組件生命週期圖，咱們能夠看出，state是一個狀態機，state的改變會引發shouldcomponentupdate、componentwillupdate、rendner...一系列方法的執行，視圖會從新渲染。因此，若是須要動態地改變組件的數據或試圖，請操做state。

react組件之間的通訊

1. 子組件接收父組件的改變信號

   簡單：當父組件改變時，直接向子組件傳遞props

2. 父組件接收子組件的改變信號
   在父組件中定義一個方法，並經過props傳遞給子組件，子組件改變時，經過調用這個父組件傳遞過來的方法，從而實如今父組件中執行該方法。
3. 非父子關係組件之間的通訊

   RCTDeviceEventEmitter模塊：它有倆個方法：emit和addListener，一個發送，一個接收。

   RCTDeviceEventEmitter.emit(notifName,param);

   RCTDeviceEventEmitter.addListener(notifName,callback)

native 事件對象

在項目中，遇到一個控制scrollview組件滾動的需求，須要獲取當前滾動的座標，當時找了很久的文檔，沒找到解決方案，後來發現能夠經過這樣來傳入一個事件對象

<ScrollView ref='scrollView' onScroll = {(e) => {this.scrollhShow(e);}}>

而後在函數中讀取：

scrollhShow(e) {
    console.log(e.nativeEvent)
}

噹噹噹當，我要的滾動視圖的座標值就在裏面了。

原文連接：https://www.cnblogs.com/yzg1/...，轉載請註明原創！

更多

學習React Native必看的幾個開源項目

手把手教你React Native 實戰之開山篇《一》

react-native技術的優劣

若是你以爲此文對您有所幫助，歡迎隨時撩我 。微信公衆號：終端研發部