F8App-ReactNative项目源码分析3-Android端

╰半橙微兮° 2022-07-24 11:08 199阅读 0赞

近期开始研究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文件结构][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 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以前的版本支持有各种兼容问题，具体参考[文档][Link 1]。  
CodePush的具体配置可以参考[这篇文章][Link 2],配置需要注意的事项还是挺多的，我参考这篇文章配置成功了，本文不做详细介绍。

## 总结 ##

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

[本文独立博客地址][Link 3]

[as]: http://o79096vir.bkt.clouddn.com/667c005f394c5c8cf85833ca5c5718f3.png
[CodePush]: http://microsoft.github.io/code-push//docs/getting-started.html
[React Native Package Manager _RNPM]: https://github.com/rnpm/rnpm
[NativeComponentsAndroid]: https://github.com/facebook/react-native/blob/master/docs/NativeComponentsAndroid.md
[React Native Client SDK]: http://microsoft.github.io/code-push/docs/react-native.html
[Link 1]: http://microsoft.github.io/code-push/docs/react-native.html#link-1
[Link 2]: http://bbs.reactnative.cn/topic/725/code-push-%E7%83%AD%E6%9B%B4%E6%96%B0%E4%BD%BF%E7%94%A8%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E%E5%92%8C%E6%95%99%E7%A8%8B/2
[Link 3]: http://www.offbye.com/2016/05/19/F8App-ReactNative%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%903-Android/