React Native 每日一學(xué)(Learn a little every day)
匯聚知識，分享精華。每天一個知識點（技巧，經(jīng)驗，填坑日記等
如果你是一名React Native愛好者，或者有一顆熱愛鉆研新技術(shù)的心，喜歡分享技術(shù)干貨、項目經(jīng)驗、以及你在React Naive學(xué)習(xí)研究或?qū)嵺`中的一些經(jīng)驗心得等等，歡迎投稿《React Native 每日一學(xué)》欄目。
如果你是一名Android、iOS、或前端開發(fā)人員，有者一顆積極進(jìn)取的心，歡迎關(guān)注《React Native 每日一學(xué)》。本欄目匯聚React Native開發(fā)的技巧，知識點，經(jīng)驗等。
列表
- [D1:React Native 鉤子函數(shù)對源生庫、第三方庫的擴(kuò)展 (2016-10-1)](#D1:React Native 鉤子函數(shù)對源生庫、第三方庫的擴(kuò)展 (2016-10-1))
2.[D2:從指定版本創(chuàng)建RN工程]
D1:React Native 鉤子函數(shù)對源生庫、第三方庫的擴(kuò)展 (2016-10-1)
經(jīng)常用到源生的RN庫、第三方庫等等，有時候他們的庫的功能無法滿足我們的需求，某個函數(shù)的功能想調(diào)整一下,如:源生代碼是向上移動，我想改為向下移動，這里我們可以使用鉤子函數(shù)
代碼演示
// Hook navigator method
function hookedDisableScene(sceneIndex) {
const sceneConstructor = this.refs[`scene_${sceneIndex}`];
// 修改的邏輯代碼
const nextRoute = this.state.routeStack[sceneIndex + 1];
if (nextRoute && nextRoute.isModal) {
sceneConstructor.setNativeProps({
pointerEvents: 'none',
});
} else {
sceneConstructor.setNativeProps(SCENE_DISABLED_NATIVE_PROPS);
}
}
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-param-reassign */
export function hookNavigator(navigator) {
if (!navigator._hookedForDialog) {
navigator._hookedForDialog = true;
navigator._disableScene = hookedDisableScene.bind(navigator);
}
}
調(diào)動方法：
componentWillMount() {
hookNavigator(this.props.navigator);
}
代碼解釋
navigator在切換界面的時候，會隱藏下方的界面，這里我們使用鉤子函數(shù)更改原有邏輯。
hookNavigator函數(shù)對navigator對象_disableScene的進(jìn)行了覆蓋擴(kuò)展，通過hookedDisableScene.bind(navigator)的綁定函數(shù)，將navigator的_disableScene替換成了我們自己的hookedDisableScene函數(shù),在里面進(jìn)行了自己的邏輯編寫。_hookedForDialog對象保證了鉤子函數(shù)只調(diào)用一次。
心得:可以對源生代碼進(jìn)行靈活的修改，不會破壞原有代碼，不會因為升級版本而丟失代碼。但是是建立在熟悉代碼的基礎(chǔ)上。
D2:從指定版本創(chuàng)建RN工程 (2016-10-1)
1. 安裝
npm i -g rninit
2. 使用
2.1 用最新的 react-native 版本創(chuàng)建工程：
rninit init [Project Name]
2.2 用特定的 react-native npm 版本創(chuàng)建工程：
rninit init [Project Name] --source react-native@0.14.2
