今天完成了我的第一個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 "../.."
-
後綴名自動獲取（文件會獲取擁有與之相應後綴名的文件）
在組件模塊的導入過程中，如果這個模塊是分設備的，也就有倆個文件：xxx.android.js和xxx.ios.js，這些後綴（android和ios）是不需要的，在不同的設備環境中，它自動獲取相應後綴名的文件，即ios包會自動獲取xxx.ios，android包會自動獲取xxx.android。
-
後綴名自動忽略（文件會自動忽略擁有與之不相應後綴名的文件）
一個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。
生命週期：
-
實例化（初始化）
-
constructor
設置默認的props->設置默認的state
-
componentWillMount
完成渲染之前執行，此時可以設置state
-
render
創建虛擬DOM，此時不能修改state
-
componentDidMount
真實的DOM渲染完畢，此時可以更改組件props及state
-
-
存在期：(這個時候的主要行爲是狀態的改變導致組件更新)
-
componentWillReceiveProps
組件接收到新的props,此時可以更改組件props及state
-
shouldComponentUpdate
操作組件是否應當渲染新的props或state，返回布爾值，首次渲染該方法不會被調用。
-
componentWillUpdate
接收到新的props或者state後，進行渲染之前調用，此時不允許更新props或state。
-
render
創建（更新）虛擬DOM
-
componentDidUpdate
組件真實的DOM更新完成
-
-
銷燬期：
- componentWillUnmount
組件被移除之前，主要用於做一些清理工作，比如事件監聽
- componentWillUnmount
react 的 props 和 state
-
props（屬性）
當我們調用這些組件時，我們如果爲每一個組件傳遞了不同的屬性，這個屬性就是props。比如下例中，我們調用了HelloWorldApp組件，併爲其設置了一個date屬性，則我們可以在HelloWorldApp的組件裏，通過this.props.date來獲取這一屬性值。
<HelloWorldApp date = {2016}> -
state（狀態）
state需要在constructor中初始化，然後通過調用setState方法修改。
通過上面的組件生命週期圖，我們可以看出，state是一個狀態機，state的改變會引起shouldcomponentupdate、componentwillupdate、rendner...一系列方法的執行，視圖會重新渲染。所以，如果需要動態地改變組件的數據或試圖，請操作state。
react組件之間的通信
-
子組件接收父組件的改變信號
簡單：當父組件改變時，直接向子組件傳遞props
-
父組件接收子組件的改變信號
在父組件中定義一個方法，並通過props傳遞給子組件，子組件改變時，通過調用這個父組件傳遞過來的方法，從而實現在父組件中執行該方法。 -
非父子關係組件之間的通信
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，轉載請註明原創！
更多
如果你覺得此文對您有所幫助，歡迎隨時撩我 。微信公衆號：終端研發部
技術+職場