今天完成了我的第一個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元件的生命週期

image

專案中使用元件的時候，糾結於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/p/5985525.html，轉載請註明原創！

更多

學習React Native必看的幾個開源專案

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

react-native技術的優劣

如果你覺得此文對您有所幫助，歡迎隨時撩我 。微信公眾號：終端研發部

技術+職場