寫在開頭
- 近期公眾號主攻下
React-native
,順便我也複習下React-native,後續寫作計劃應該是主攻Node.js和跨平臺方向、架構、Debug
為主 - 如果你感興趣,建議關注下公眾號,系統的學習下,推薦閱讀之前我的的年度原創文章集合:
https://mp.weixin.qq.com/s/RsvI5AFzbp3rm6sOlTmiYQ
正式開始
- 環境準備:Node、Watchman、Xcode 和 CocoaPods & XCode ,
穩定的代理工具
(如果沒有穩定的代理工具,基本上可以考慮放棄了) - 生成專案
npx react-native init App
cd App
yarn cd
cd ios
pod install (注意不要+sudo,此處必須全域性開啟代理,否則下載會失敗)
cd ..
yarn ios
- 如果yarn ios後無法看到Simulator有APP,使用xCode找到這個專案的ios目錄的.xcworkspace
注意 0.60 版本之後的主專案檔案是.xcworkspace,不是.xcodeproj。
- 然後用xCode開啟build,成功後模擬器就會出現APP,開啟即可進入
- ⚠️:一定不要升級xCode高版本,跟我的版本保持一致最好,因為高版本xCode的voip喚醒啟用會出現電話介面
如果你的環境是windows或者安卓,請參考官網
正式開始
- 啟動後,發現APP這樣
- 我們開啟主入口的index.js檔案
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
- 預設使用AppRegistry.registerComponent幫我們註冊了一個元件(今天不對原理做過多講解,有興趣的可以自己搭建一個React-native腳手架,你會對整套執行原理、流程有一個真正的瞭解)
- 接下來看APP元件
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
...
});
export default App;
我們今天只看react-native這個庫,預設匯出的內容.
- 即下面這段程式碼
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
- 開啟react-native原始碼
'use strict';
import typeof Button from './Libraries/Components/Button';
....
export type HostComponent<T> = _HostComponentInternal<T>;
const invariant = require('invariant');
const warnOnce = require('./Libraries/Utilities/warnOnce');
module.exports = {
// Components
get Button(): Button {
return require('./Libraries/Components/Button');
},
...
};
if (__DEV__) {
// $FlowFixMe This is intentional: Flow will error when attempting to access ART.
Object.defineProperty(module.exports, 'ART', {
configurable: true,
get() {
invariant(
false,
'ART has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/art' instead of 'react-native'. " +
'See https://github.com/react-native-community/art',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access ListView.
Object.defineProperty(module.exports, 'ListView', {
configurable: true,
get() {
invariant(
false,
'ListView has been removed from React Native. ' +
'See https://fb.me/nolistview for more information or use ' +
'`deprecated-react-native-listview`.',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access SwipeableListView.
Object.defineProperty(module.exports, 'SwipeableListView', {
configurable: true,
get() {
invariant(
false,
'SwipeableListView has been removed from React Native. ' +
'See https://fb.me/nolistview for more information or use ' +
'`deprecated-react-native-swipeable-listview`.',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access WebView.
Object.defineProperty(module.exports, 'WebView', {
configurable: true,
get() {
invariant(
false,
'WebView has been removed from React Native. ' +
"It can now be installed and imported from 'react-native-webview' instead of 'react-native'. " +
'See https://github.com/react-native-community/react-native-webview',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access NetInfo.
Object.defineProperty(module.exports, 'NetInfo', {
configurable: true,
get() {
invariant(
false,
'NetInfo has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/netinfo' instead of 'react-native'. " +
'See https://github.com/react-native-community/react-native-netinfo',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access CameraRoll.
Object.defineProperty(module.exports, 'CameraRoll', {
configurable: true,
get() {
invariant(
false,
'CameraRoll has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/cameraroll' instead of 'react-native'. " +
'See https://github.com/react-native-community/react-native-cameraroll',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access ImageStore.
Object.defineProperty(module.exports, 'ImageStore', {
configurable: true,
get() {
invariant(
false,
'ImageStore has been removed from React Native. ' +
'To get a base64-encoded string from a local image use either of the following third-party libraries:' +
"* expo-file-system: `readAsStringAsync(filepath, 'base64')`" +
"* react-native-fs: `readFile(filepath, 'base64')`",
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access ImageEditor.
Object.defineProperty(module.exports, 'ImageEditor', {
configurable: true,
get() {
invariant(
false,
'ImageEditor has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/image-editor' instead of 'react-native'. " +
'See https://github.com/react-native-community/react-native-image-editor',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access TimePickerAndroid.
Object.defineProperty(module.exports, 'TimePickerAndroid', {
configurable: true,
get() {
invariant(
false,
'TimePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-community/datetimepicker',
);
},
});
// $FlowFixMe This is intentional: Flow will error when attempting to access ViewPagerAndroid.
Object.defineProperty(module.exports, 'ViewPagerAndroid', {
configurable: true,
get() {
invariant(
false,
'ViewPagerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. " +
'See https://github.com/react-native-community/react-native-viewpager',
);
},
});
}
- 我刪了一些倒入和get定義,方便閱讀
-
這個原始碼檔案大概有650行,module.export暴露出來了很多東西,但是,區分多種
- 一種是Components元件
- 一種是API
- 一種是Plugins
- 一種是Prop Types
- 還有一種是最後的DEV環境下,
逐個攻破
- 首先是元件
- 其次是API
- 然後是Plugins
- 然後是Prop types
- 最後是DEV環境下的對舊版本的部分API使用方式警告
可以看到入口檔案中的一些API
- 例如
get AppRegistry(): AppRegistry {
return require('./Libraries/ReactNative/AppRegistry');
},
- 圖片
get Image(): Image {
return require('./Libraries/Image/Image');
},
拿Image元件原始碼示例
- 找到
./Libraries/Image/Image
原始碼
- 腳手架應該根據是react-native run ios 還是 安卓,選擇載入對應js,我們找到Image.ios.js檔案,只有200行,今天重點主攻下
- 預設暴露
module.exports = ((Image: any): React.AbstractComponent<
ImagePropsType,
React.ElementRef<typeof RCTImageView>,
> &
ImageComponentStatics);
- Image物件
- Image元件真正展示的
return (
<RCTImageView
{...props}
ref={forwardedRef}
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={sources}
/>
);
- 找到
RCTImageView
,ImageViewNativeComponent.js
這個檔案
let ImageViewNativeComponent;
if (global.RN$Bridgeless) {
ImageViewNativeComponent = codegenNativeComponent<NativeProps>(
'RCTImageView',
);
} else {
ImageViewNativeComponent = requireNativeComponent<NativeProps>(
'RCTImageView',
);
}
module.exports = (ImageViewNativeComponent: HostComponent<NativeProps>);
- 真正展示的是
ImageViewNativeComponent
,關於上面這段原始碼我查閱了一些的外文資料和其他原始碼,最終發現了一個註釋
const NativeModules = require('../BatchedBridge/NativeModules');
const turboModuleProxy = global.__turboModuleProxy;
export function get < T: TurboModule > (name: string): ? T {
if (!global.RN$Bridgeless) {
// Backward compatibility layer during migration.
const legacyModule = NativeModules[name];
if (legacyModule != null) {
return ((legacyModule: any): T);
}
}
if (turboModuleProxy != null) {
const module: ? T = turboModuleProxy(name);
return module;
}
return null;
}
export function getEnforcing < T: TurboModule > (name: string): T {
const module = get(name);
return module;
}
- 即
Backward compatibility layer during migration.
,即遷移過程中向後相容,即相容性處理 - 這個
codegenNativeComponent
就是圖片展示最終的一環,我們去看看是什麼
忽略型別等其它空值警告判斷,直入主題
let componentNameInUse =
options && options.paperComponentName
? options.paperComponentName
: componentName;
if (options != null && options.paperComponentNameDeprecated != null) {
if (UIManager.getViewManagerConfig(componentName)) {
componentNameInUse = componentName;
} else if (
options.paperComponentNameDeprecated != null &&
UIManager.getViewManagerConfig(options.paperComponentNameDeprecated)
) {
componentNameInUse = options.paperComponentNameDeprecated;
} else {
throw new Error(
`Failed to find native component for either ${componentName} or ${options.paperComponentNameDeprecated ||
'(unknown)'}`,
);
}
}
// If this function is run at runtime then that means the view configs were not
// generated with the view config babel plugin, so we need to require the native component.
//
// This will be useful during migration, but eventually this will error.
return (requireNativeComponent<Props>(
componentNameInUse,
): HostComponent<Props>);
- 還是 要先看
UIManager.getViewManagerConfig
'use strict';
import type {Spec} from './NativeUIManager';
interface UIManagerJSInterface extends Spec {
+getViewManagerConfig: (viewManagerName: string) => Object;
+createView: (
reactTag: ?number,
viewName: string,
rootTag: number,
props: Object,
) => void;
+updateView: (reactTag: number, viewName: string, props: Object) => void;
+manageChildren: (
containerTag: ?number,
moveFromIndices: Array<number>,
moveToIndices: Array<number>,
addChildReactTags: Array<number>,
addAtIndices: Array<number>,
removeAtIndices: Array<number>,
) => void;
}
const UIManager: UIManagerJSInterface =
global.RN$Bridgeless === true
? require('./DummyUIManager') // No UIManager in bridgeless mode
: require('./PaperUIManager');
module.exports = UIManager;
- 進入
PaperUIManager
找到getViewManagerConfig
getViewManagerConfig: function(viewManagerName: string): any {
if (
viewManagerConfigs[viewManagerName] === undefined &&
NativeUIManager.getConstantsForViewManager
) {
try {
viewManagerConfigs[
viewManagerName
] = NativeUIManager.getConstantsForViewManager(viewManagerName);
} catch (e) {
viewManagerConfigs[viewManagerName] = null;
}
}
const config = viewManagerConfigs[viewManagerName];
if (config) {
return config;
}
// If we're in the Chrome Debugger, let's not even try calling the sync
// method.
if (!global.nativeCallSyncHook) {
return config;
}
if (
NativeUIManager.lazilyLoadView &&
!triedLoadingConfig.has(viewManagerName)
) {
const result = NativeUIManager.lazilyLoadView(viewManagerName);
triedLoadingConfig.add(viewManagerName);
if (result.viewConfig) {
getConstants()[viewManagerName] = result.viewConfig;
lazifyViewManagerConfig(viewManagerName);
}
}
return viewManagerConfigs[viewManagerName];
},
-
viewManagerConfigs
初始化是一個空物件,key-value形式儲存、管理這些原生檢視配置 - 我突然發現我錯了路線,因為React-native雖然是用js寫程式碼,不過最終都是轉換成原生控制元件,回到主題的第一個程式碼底部
return (requireNativeComponent<Props>(
componentNameInUse,
): HostComponent<Props>);
- 最最關鍵的是:
requireNativeComponent
,根據componentName去載入原生元件,找到原始碼
'use strict';
const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
const getNativeComponentAttributes = require('./getNativeComponentAttributes');
import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
const requireNativeComponent = <T>(uiViewClassName: string): HostComponent<T> =>
((createReactNativeComponentClass(uiViewClassName, () =>
getNativeComponentAttributes(uiViewClassName),
): any): HostComponent<T>);
module.exports = requireNativeComponent;
最重要的載入原生元件的程式碼找到了
((createReactNativeComponentClass(uiViewClassName, () =>
getNativeComponentAttributes(uiViewClassName),
): any): HostComponent<T>)
解析`createReactNativeComponentClass
- 給
createReactNativeComponentClass
傳入uiViewClassName
即元件name,傳入回撥函式,返回getNativeComponentAttributes(uiViewClassName)
- 找到原始碼
createReactNativeComponentClass
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
'use strict';
import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
import type {ViewConfigGetter} from './ReactNativeTypes';
const {register} = ReactNativeViewConfigRegistry;
/**
* Creates a renderable ReactNative host component.
* Use this method for view configs that are loaded from UIManager.
* Use createReactNativeComponentClass() for view configs defined within JavaScript.
*
* @param {string} config iOS View configuration.
* @private
*/
const createReactNativeComponentClass = function(
name: string,
callback: ViewConfigGetter,
): string {
return register(name, callback);
};
module.exports = createReactNativeComponentClass;
- 跟我預想一樣,向register函式傳入name和cb,註冊成功後觸發callback(getNativeComponentAttributes)
- 找到
ReactNativePrivateInterface.js
裡面的ReactNativeViewConfigRegistry
get ReactNativeViewConfigRegistry(): ReactNativeViewConfigRegistry {
return require('../Renderer/shims/ReactNativeViewConfigRegistry');
},
- 再找到register方法
exports.register = function(name: string, callback: ViewConfigGetter): string {
invariant(
!viewConfigCallbacks.has(name),
'Tried to register two views with the same name %s',
name,
);
invariant(
typeof callback === 'function',
'View config getter callback for component `%s` must be a function (received `%s`)',
name,
callback === null ? 'null' : typeof callback,
);
viewConfigCallbacks.set(name, callback);
return name;
};
- 重點:viewConfigCallbacks.set(name, callback);viewConfigCallbacks是一個Map型別(ES6),key-value資料結構,怎麼理解這段程式碼,看註釋:
按名稱註冊本機檢視/元件。
提供了一個回撥函式來從UIManager載入檢視配置。
回撥被延遲直到檢視被實際呈現。
- 至此,載入原生元件邏輯配合之前的UImanager,getViewManagerConfig那塊原始碼就解析完了。
- 這是我們傳入的cb(回撥函式),獲取原生元件屬性
function getNativeComponentAttributes(uiViewClassName: string): any {
const viewConfig = UIManager.getViewManagerConfig(uiViewClassName);
invariant(
viewConfig != null && viewConfig.NativeProps != null,
'requireNativeComponent: "%s" was not found in the UIManager.',
uiViewClassName,
);
// TODO: This seems like a whole lot of runtime initialization for every
// native component that can be either avoided or simplified.
let {baseModuleName, bubblingEventTypes, directEventTypes} = viewConfig;
let nativeProps = viewConfig.NativeProps;
while (baseModuleName) {
const baseModule = UIManager.getViewManagerConfig(baseModuleName);
if (!baseModule) {
warning(false, 'Base module "%s" does not exist', baseModuleName);
baseModuleName = null;
} else {
bubblingEventTypes = {
...baseModule.bubblingEventTypes,
...bubblingEventTypes,
};
directEventTypes = {
...baseModule.directEventTypes,
...directEventTypes,
};
nativeProps = {
...baseModule.NativeProps,
...nativeProps,
};
baseModuleName = baseModule.baseModuleName;
}
}
const validAttributes = {};
for (const key in nativeProps) {
const typeName = nativeProps[key];
const diff = getDifferForType(typeName);
const process = getProcessorForType(typeName);
validAttributes[key] =
diff == null && process == null ? true : {diff, process};
}
// Unfortunately, the current setup declares style properties as top-level
// props. This makes it so we allow style properties in the `style` prop.
// TODO: Move style properties into a `style` prop and disallow them as
// top-level props on the native side.
validAttributes.style = ReactNativeStyleAttributes;
Object.assign(viewConfig, {
uiViewClassName,
validAttributes,
bubblingEventTypes,
directEventTypes,
});
if (!hasAttachedDefaultEventTypes) {
attachDefaultEventTypes(viewConfig);
hasAttachedDefaultEventTypes = true;
}
return viewConfig;
}
- 至此,一個完整的React-native元件解析從載入、註冊、展現整個過程就解析完了。