近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。
本文分析f8app android代码的结构和技术实现，阅读本文的前提是熟悉Android开发。

f8app android代码结构分析

ReactNative项目Android相关的代码都在android目录下，可以直接使用Android Studio打开这个目录方便查看和修改。android目录结构如下

├── F8v2.iml
├── app
│   ├── app.iml
│   ├── build.gradle
│   ├── proguard-rules.pro
│   ├── react.gradle
│   └── src
│       └── main
│           ├── AndroidManifest.xml
│           ├── java
│           │   └── com
│           │       └── facebook
│           │           └── f8
│           │               └── MainActivity.java
│           └── res
│               ├── mipmap-hdpi
│               │   ├── ic_launcher.png
│               │   └── ic_notification.png
│               ├── mipmap-mdpi
│               │   ├── ic_launcher.png
│               │   └── ic_notification.png
│               ├── mipmap-xhdpi
│               │   ├── ic_launcher.png
│               │   └── ic_notification.png
│               ├── mipmap-xxhdpi
│               │   ├── ic_launcher.png
│               │   └── ic_notification.png
│               ├── mipmap-xxxhdpi
│               │   ├── ic_launcher.png
│               │   └── ic_notification.png
│               ├── raw
│               │   └── third_party_notices.html
│               └── values
│                   ├── strings.xml
│                   └── styles.xml
├── build.gradle
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradle.properties
├── gradlew
├── gradlew.bat
├── local.properties
└── settings.gradle

在android Studio下显示如下：

as文件结构

MainActivity 代码分析

通过AndroidManifest.xml可以知道App的页面入口Activity是android/app/src/main/java/com/facebook/f8/MainActivity.java，代码比较简单，继承了ReactActivity,关键的方法是getJSBundleFile，可以看到使用了CodePush推送更新技术，返回了一个bundle文件，分析代码可知默认的bundle文件是index.android.bundle。
CodePush是微软提供的一个开发者服务，支持对React Native和Cordova App在不重新安装App的前提下热更新App，是目前很流行的一种App热部署技术。
getPackages方法初始化了CodePush，初始了ReactNativePushNotificationPackage推送服务，初始化了用到的一些RN第三方包：

• FBSDKPackage是Android Facebook SDK的React Native封装，让React Native App能够使用Facebook的接口，提供了Facebook用户登录token，分享等功能;
• LinearGradientPackage是一个渐变UI控件；
• RNSharePackage是个分享插件，提供了通过Android Intent.ACTION_SEND分享文字和链接的简单分享功能；
• RNSendIntentPackage是一个发送Android Intent的插件，提供了通过Intent拨打电话，发送短信，在系统日历添加事件提醒等功能。
• ReactNativePushNotificationPackage是一个本地和远程通知推送插件，可以接受Google GCM推送的消息，并在状态栏上显示。

public class MainActivity extends ReactActivity {
  private CodePush _codePush;
  private ReactNativePushNotificationPackage _pushNotification;
  private CallbackManager mCallbackManager;

    @Override
    protected String getJSBundleFile() {
        return this._codePush.getBundleUrl("index.android.bundle");
    }

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "F8v2";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      this._codePush = new CodePush("qwfkzzq7Y8cSrkiuU7aRCkIP7XYLEJ6b-AFoe", this, BuildConfig.DEBUG);
      this._pushNotification = new ReactNativePushNotificationPackage(this);
      mCallbackManager = new CallbackManager.Factory().create();

      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new FBSDKPackage(mCallbackManager),
        new LinearGradientPackage(),
        new RNSharePackage(),
        new RNSendIntentPackage(),
        this._codePush.getReactPackage(),
        this._pushNotification
      );
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FacebookSdk.sdkInitialize(getApplicationContext());
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      mCallbackManager.onActivityResult(requestCode, resultCode, data);
    }

   @Override
   protected void onNewIntent (Intent intent) {
     super.onNewIntent(intent);
     _pushNotification.newIntent(intent);
   }

  @Override
  protected void onResume() {
      super.onResume();
      AppEventsLogger.activateApp(getApplicationContext());
  }

  @Override
  protected void onPause() {
      super.onPause();
      AppEventsLogger.deactivateApp(getApplicationContext());
  }

  @Override
  protected void onStop() {
      super.onStop();
      AppEventsLogger.onContextStop();
  }
}

可以查看settings.gradle,发现f8app Android引用了5个子工程，子工程源码放在../node_modules目录下。

rootProject.name = 'F8v2'

include ':app', ':react-native-linear-gradient'
include ':app', ':react-native-code-push'
include ':react-native-push-notification'
include ':react-native-share', ':app'
include ':react-native-fbsdk'
include ':react-native-send-intent', ':app'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/RNPushNotificationAndroid')
project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
project(':react-native-fbsdk').projectDir = new File(settingsDir, '../node_modules/react-native-fbsdk/Android')
project(':react-native-send-intent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-send-intent')

可以看到，可以通在settings.gradle引入工程的方法增加新的自定义RN插件。实际上，这些插件是通过rnpm install命令安装的。React Native Package Manager (RNPM) 是一个简化React Native插件安装体验的工具。
下面我们分析react-native-linear-gradient插件看看插件是如何实现的。

React Native android 插件实现分析

LinearGradientView是一个典型的原生UI插件，可以先看看官方的文档NativeComponentsAndroid， 我感觉这个文档有点过时，没有提到ReactPackage。ReactPackage接口是现在RN插件的主入口。LinearGradientPackage实现了ReactPackage接口
ReactPackage接口代码如下：

/**
 * Main interface for providing additional capabilities to the catalyst framework by couple of
 * different means:
 * 1) Registering new native modules
 * 2) Registering new JS modules that may be accessed from native modules or from other parts of the
 * native code (requiring JS modules from the package doesn't mean it will automatically be included
 * as a part of the JS bundle, so there should be a corresponding piece of code on JS side that will
 * require implementation of that JS module so that it gets bundled)
 * 3) Registering custom native views (view managers) and custom event types
 * 4) Registering natively packaged assets/resources (e.g. images) exposed to JS
 *
 * TODO(6788500, 6788507): Implement support for adding custom views, events and resources
 */
public interface ReactPackage {

  /**
   * @param reactContext react application context that can be used to create modules
   * @return list of native modules to register with the newly created catalyst instance
   */
  List<NativeModule> createNativeModules(ReactApplicationContext reactContext);

  /**
   * @return list of JS modules to register with the newly created catalyst instance.
   *
   * IMPORTANT: Note that only modules that needs to be accessible from the native code should be
   * listed here. Also listing a native module here doesn't imply that the JS implementation of it
   * will be automatically included in the JS bundle.
   */
  List<Class<? extends JavaScriptModule>> createJSModules();

  /**
   * @return a list of view managers that should be registered with {@link UIManagerModule}
   */
  List<ViewManager> createViewManagers(ReactApplicationContext reactContext);
}

LinearGradientPackage类主要实现了createViewManagers方法，返回了一个LinearGradientManager实例，代码如下：

public class LinearGradientPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new LinearGradientManager());
    }
}

下面看LinearGradientManager类，包含了一个LinearGradientView实例，LinearGradientView是渐变View的具体实现，通过@ReactProp注解可以在js层设置渐变View的一些属性，例如渐变颜色，渐变开始和结束位置等的。代码如下：

public class LinearGradientManager extends SimpleViewManager<LinearGradientView> {

    public static final String REACT_CLASS = "BVLinearGradient";
    public static final String PROP_COLORS = "colors";
    public static final String PROP_LOCATIONS = "locations";
    public static final String PROP_START_POS = "start";
    public static final String PROP_END_POS = "end";
    public static final String PROP_BORDER_RADIUS = "borderRadius";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected LinearGradientView createViewInstance(ThemedReactContext context) {
        return new LinearGradientView(context);
    }

    @ReactProp(name=PROP_COLORS)
    public void setColors(LinearGradientView gradientView, ReadableArray colors) {
        gradientView.setColors(colors);
    }

    @ReactProp(name=PROP_LOCATIONS)
    public void setLocations(LinearGradientView gradientView, ReadableArray locations) {
        gradientView.setLocations(locations);
    }

    @ReactProp(name=PROP_START_POS)
    public void setStartPosition(LinearGradientView gradientView, ReadableArray startPos) {
        gradientView.setStartPosition(startPos);
    }

    @ReactProp(name=PROP_END_POS)
    public void setEndPosition(LinearGradientView gradientView, ReadableArray endPos) {
        gradientView.setEndPosition(endPos);
    }

    // temporary solution until following issue is resolved:
    // https://github.com/facebook/react-native/issues/3198
    @ReactProp(name=PROP_BORDER_RADIUS, defaultFloat = 0f)
    public void setBorderRadius(LinearGradientView gradientView, float borderRadius) {
        gradientView.setBorderRadius(PixelUtil.toPixelFromDIP(borderRadius));
    }
}

CodePush 热更新技术介绍

f8app使用了CodePush技术热更新App，可以先看下微软官方的文档React Native Client SDK。
CodePush提供了对React Native App的热更新能力，目前只能对js bundle进行热更新，如果原生代码修改了是不能热更新的，只能通过重新安装App的方式升级。
CodePush的一个问题是是对React Native版本的兼容性，由于React Native版本更新很快，CodePush是由微软而不是Facebook维护的，所以对React Native0.18以前的版本支持有各种兼容问题，具体参考文档。
CodePush的具体配置可以参考这篇文章,配置需要注意的事项还是挺多的，我参考这篇文章配置成功了，本文不做详细介绍。

总结

本文分析了f8app android代码结构，以react-native-linear-gradient插件为例子分析了React Native插件的结构，介绍了CodePush热更新技术，通过本文可以对f8app有比较初步的认识。
下篇文章将分析React Native js代码，这块是f8app的核心实现，代码量比较大。