5000字的React-native源码解析

写在开头

• 近期公众号主攻下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.pContainer}>
              <Text style={styles.pTitle}>Step One</Text>
              <Text style={styles.pDescription}>
                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.pContainer}>
              <Text style={styles.pTitle}>See Your Changes</Text>
              <Text style={styles.pDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.pContainer}>
              <Text style={styles.pTitle}>Debug</Text>
              <Text style={styles.pDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.pContainer}>
              <Text style={styles.pTitle}>Learn More</Text>
              <Text style={styles.pDescription}>
                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