Facebook F8App-ReactNative项目源码分析5-iOS篇

傷城~ 2022-08-23 05:43 196阅读 0赞

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。  
本文分析f8app iOS代码的结构和技术实现，阅读本文的前提是对React Native和iOS开发有一定的了解。  
f8app ios项目使用了CocosPod管理模块，现在RN的最新版本创建的项目默认已经不再使用CocosPods了,直接通过工程引用。f8app还是用了CocosPod，因此我们首先需要在ios目录下运行`pod install`，安装好依赖的项目，然后用Xcode打开F8v2.xcworkspace工作空间，注意不是打开F8v2.xcodeproj工程文件，我经常犯这个错误，实在不喜欢用CocosPods啊。

## iOS f8app效果展示 ##

先看下效果吧，在iOS模拟器上动效还是很好的。

![f8appiOS][]

## ios工程结构 ##

首先还是先看下ios工程的结构：

.
    ├── Default-568h@2x.png
    ├── F8Scrolling.h
    ├── F8Scrolling.m
    ├── F8v2
    │   ├── AppDelegate.h
    │   ├── AppDelegate.m
    │   ├── Base.lproj
    │   │   └── LaunchScreen.xib
    │   ├── Images.xcassets
    │   │   ├── AppIcon.appiconset
    │   │   │   ├── AppIcon@2x.png
    │   │   │   ├── AppIcon@3x.png
    │   │   │   └── Contents.json
    │   │   └── Contents.json
    │   ├── Info.plist
    │   └── main.m
    ├── F8v2.xcodeproj
    ├── F8v2.xcworkspace
    ├── F8v2Tests
    │   └── Info.plist
    ├── PodFile
    ├── Podfile.lock
    ├── Pods
    │   ├── Bolts
    │   │   ├── Bolts
    │   │   │   ├── Common
    │   │   │   └── iOS
    │   │   ├── LICENSE
    │   │   └── README.md
    │   ├── FBSDKCoreKit
    │   │   ├── FBSDKCoreKit
    │   │   │   └── FBSDKCoreKit
    │   │   ├── LICENSE
    │   │   └── README.mdown
    │   ├── FBSDKLoginKit
    │   │   ├── FBSDKLoginKit
    │   │   │   └── FBSDKLoginKit
    │   │   ├── LICENSE
    │   │   └── README.mdown
    │   ├── FBSDKShareKit
    │   │   ├── FBSDKShareKit
    │   │   │   └── FBSDKShareKit
    │   │   ├── LICENSE
    │   │   └── README.mdown
    │   ├── Headers
    │   │   ├── Private
    │   │   │   ├── Bolts
    │   │   │   ├── CodePush
    │   │   │   ├── FBSDKCoreKit
    │   │   │   ├── FBSDKLoginKit
    │   │   │   ├── FBSDKShareKit
    │   │   │   ├── React
    │   │   │   ├── react-native-fbsdkcore
    │   │   │   ├── react-native-fbsdklogin
    │   │   │   └── react-native-fbsdkshare
    │   │   └── Public
    │   │       ├── Bolts
    │   │       ├── CodePush
    │   │       ├── FBSDKCoreKit
    │   │       ├── FBSDKLoginKit
    │   │       ├── FBSDKShareKit
    │   │       ├── React
    │   │       ├── react-native-fbsdkcore
    │   │       ├── react-native-fbsdklogin
    │   │       └── react-native-fbsdkshare
    │   ├── Local\ Podspecs
    │   │   ├── CodePush.podspec.json
    │   │   ├── React.podspec.json
    │   │   ├── react-native-fbsdkcore.podspec.json
    │   │   ├── react-native-fbsdklogin.podspec.json
    │   │   └── react-native-fbsdkshare.podspec.json
    │   ├── Manifest.lock
    │   ├── Pods.xcodeproj
    │   │   ├── project.pbxproj
    │   │   ├── xcshareddata
    │   │   │   └── xcschemes
    │   └── Target\ Support\ Files
    │       ├── Bolts
    │       │   ├── Bolts-dummy.m
    │       │   ├── Bolts-prefix.pch
    │       │   └── Bolts.xcconfig
    │       ├── CodePush
    │       │   ├── CodePush-dummy.m
    │       │   ├── CodePush-prefix.pch
    │       │   └── CodePush.xcconfig
    │       ├── FBSDKCoreKit
    │       │   ├── FBSDKCoreKit-dummy.m
    │       │   ├── FBSDKCoreKit-prefix.pch
    │       │   └── FBSDKCoreKit.xcconfig
    │       ├── FBSDKLoginKit
    │       │   ├── FBSDKLoginKit-dummy.m
    │       │   ├── FBSDKLoginKit-prefix.pch
    │       │   └── FBSDKLoginKit.xcconfig
    │       ├── FBSDKShareKit
    │       │   ├── FBSDKShareKit-dummy.m
    │       │   ├── FBSDKShareKit-prefix.pch
    │       │   └── FBSDKShareKit.xcconfig
    │       ├── Pods-F8v2
    │       │   ├── Pods-F8v2-acknowledgements.markdown
    │       │   ├── Pods-F8v2-acknowledgements.plist
    │       │   ├── Pods-F8v2-dummy.m
    │       │   ├── Pods-F8v2-frameworks.sh
    │       │   ├── Pods-F8v2-resources.sh
    │       │   ├── Pods-F8v2.debug.xcconfig
    │       │   └── Pods-F8v2.release.xcconfig
    │       ├── React
    │       │   ├── React-dummy.m
    │       │   ├── React-prefix.pch
    │       │   └── React.xcconfig
    │       ├── react-native-fbsdkcore
    │       │   ├── react-native-fbsdkcore-dummy.m
    │       │   ├── react-native-fbsdkcore-prefix.pch
    │       │   └── react-native-fbsdkcore.xcconfig
    │       ├── react-native-fbsdklogin
    │       │   ├── react-native-fbsdklogin-dummy.m
    │       │   ├── react-native-fbsdklogin-prefix.pch
    │       │   └── react-native-fbsdklogin.xcconfig
    │       └── react-native-fbsdkshare
    │           ├── react-native-fbsdkshare-dummy.m
    │           ├── react-native-fbsdkshare-prefix.pch
    │           └── react-native-fbsdkshare.xcconfig
    ├── Settings.bundle
    │   ├── About.plist
    │   ├── Root.plist
    │   └── en.lproj
    │       └── Root.strings
    ├── Splash@2x.png
    └── build

## PodFile文件分析 ##

PodFile是CocosPod的配置文件，是ruby语言写的，定义了用到的第三方模块，和一些处理过程。

source 'https://github.com/CocoaPods/Specs.git'
    
    target 'F8v2' do
      pod 'React', :subspecs => [
        'Core',
        'RCTActionSheet',
        'RCTImage',
        'RCTNetwork',
        'RCTText',
        'RCTWebSocket',
        'RCTPushNotification',
        'RCTLinkingIOS',
        'RCTVibration',
      ], :path => '../node_modules/react-native'
      pod 'react-native-fbsdkcore', :path => '../node_modules/react-native-fbsdk/iOS/core'
      pod 'react-native-fbsdklogin', :path => '../node_modules/react-native-fbsdk/iOS/login'
      pod 'react-native-fbsdkshare', :path => '../node_modules/react-native-fbsdk/iOS/share'
      pod 'CodePush', :path => '../node_modules/react-native-code-push'
    end
    
    # Start the React Native JS packager server when running the project in Xcode.
    
    start_packager = %q( if nc -w 5 -z localhost 8081 ; then if ! curl -s "http://localhost:8081/status" | grep -q "packager-status:running" ; then echo "Port 8081 already in use, packager is either not running or not running correctly" exit 2 fi else open $SRCROOT/../../node_modules/react-native/packager/launchPackager.command || echo "Can't start packager automatically" fi )
    
    post_install do |installer|
      target = installer.pods_project.targets.select{|t| 'React' == t.name}.first
      phase = target.new_shell_script_build_phase('Run Script')
      phase.shell_script = start_packager
    end

通过CocosPod引入了React，react-native-fbsdkcore，react-native-fbsdklogin，react-native-fbsdkshare，CodePush这些模块，  
最后会尝试启动React Native packager。

## 入口类AppDelegate.m代码分析 ##

从项目的入口类AppDelegate.m看起,

#import <FBSDKCoreKit/FBSDKCoreKit.h>
    #import <CodePush/CodePush.h>
    
    #import "AppDelegate.h"
    
    #import "RCTRootView.h"
    #import "RCTPushNotificationManager.h"
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      NSURL *jsCodeLocation;
    
    #ifdef DEBUG
      NSString *ip = [[NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"ip" ofType:@"txt"] encoding:NSUTF8StringEncoding error:nil] stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"\n"]];
    
      if (!ip) {
        ip = @"127.0.0.1";
      }
    
      jsCodeLocation = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:8081/index.ios.bundle?platform=ios&dev=true", ip]];
    #else
      jsCodeLocation = [CodePush bundleURL];
    #endif
      NSLog(jsCodeLocation.absoluteString);
    
      RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                          moduleName:@"F8v2"
                                                   initialProperties:nil
                                                       launchOptions:launchOptions];
    
      NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil];
      UIImageView *loadingView = [[[objects objectAtIndex:0] subviews] objectAtIndex:0];
      loadingView = [[UIImageView alloc] initWithImage:[loadingView image]];
      loadingView.frame = [UIScreen mainScreen].bounds;
    
      rootView.loadingView = loadingView;
    
      self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
      UIViewController *rootViewController = [[UIViewController alloc] init];
      rootViewController.view = rootView;
      self.window.rootViewController = rootViewController;
      [[UIApplication sharedApplication] setStatusBarHidden:NO];
      [self.window makeKeyAndVisible];
    
      return YES;
    }
    
    - (void)applicationDidBecomeActive:(UIApplication *)application {
      [FBSDKAppEvents activateApp];
    }
    
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
      return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                            openURL:url
                                                  sourceApplication:sourceApplication
                                                         annotation:annotation];
    }
    
    - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
    {
      [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
    }
    
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
    {
      [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    }
    
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
    {
      [RCTPushNotificationManager didReceiveRemoteNotification:notification];
    }
    
    @end

可以看到主要用了FBSDKCoreKit，CodePush热更新，RCTPushNotificationManager推送。  
首先创建了RCTRootView \*rootView，RCTRootView就是RN页面的容器，我们只要在iOS ViewController中添加RCTRootView就可以展示RN的页面了。  
然后从LaunchScreen.xib中取出一个子View作为rootView的加载页面loadingView，设置view的frame，创建一个rootViewController，并把它的view设置成RCTRootView \*rootView，然后把UIWindow的rootViewController设成刚才创建的rootViewController，这些代码还是很简单的。  
didRegisterUserNotificationSettings，didRegisterForRemoteNotificationsWithDeviceToken，didReceiveRemoteNotification几个方法是对推送通知的处理，也比较简单。

## F8Scrolling.m滚动UI组件代码分析 ##

然后看下F8Scrolling.m，这个是RN的滚动UI组件，在f8app/js/common/ListContainer.js中用到了这个组件的js代码。我们看看代码里做了哪些事情：

#import <UIKit/UIKit.h>
    #import <CoreGraphics/CoreGraphics.h>
    
    #import "F8Scrolling.h"
    #import "RCTUIManager.h"
    #import "RCTScrollView.h"
    
    @interface F8Scrolling () { 
      NSMapTable *_pinnedViews;
      NSMapTable *_distances;
    }
    
    @end
    
    @implementation F8Scrolling
    
    @synthesize bridge = _bridge;
    
    RCT_EXPORT_MODULE()
    
    - (instancetype)init
    {
      if (self = [super init]) {
        _pinnedViews = [[NSMapTable alloc] initWithKeyOptions:NSMapTableWeakMemory valueOptions:NSMapTableWeakMemory capacity:20];
        _distances = [[NSMapTable alloc] initWithKeyOptions:NSMapTableWeakMemory valueOptions:NSMapTableStrongMemory capacity:20];
      }
      return self;
    }
    
    - (dispatch_queue_t)methodQueue
    {
      return dispatch_get_main_queue();
    }
    
    RCT_EXPORT_METHOD(pin:(nonnull NSNumber *)scrollViewReactTag
                      toView:(nonnull NSNumber *)pinnedViewReactTag
                      withDistance:(nonnull NSNumber *)distance)
    {
      UIView *pinnedView = [self.bridge.uiManager viewForReactTag:pinnedViewReactTag];
      UIView *scrollView = [self.bridge.uiManager viewForReactTag:scrollViewReactTag];
      if ([scrollView isKindOfClass:[RCTScrollView class]]) {
        RCTScrollView *reactScrollView = (RCTScrollView *)scrollView;
        [_pinnedViews setObject:pinnedView forKey:reactScrollView.scrollView];
        [_distances setObject:distance forKey:reactScrollView.scrollView];
        [reactScrollView setNativeScrollDelegate:self];
        [self scrollViewDidScroll:reactScrollView.scrollView];
      }
    }
    
    RCT_EXPORT_METHOD(unpin:(nonnull NSNumber *)scrollViewReactTag)
    {
      UIView *scrollView = [self.bridge.uiManager viewForReactTag:scrollViewReactTag];
      if ([scrollView isKindOfClass:[RCTScrollView class]]) {
        RCTScrollView *reactScrollView = (RCTScrollView *)scrollView;
        [_pinnedViews removeObjectForKey:reactScrollView.scrollView];
        [_distances removeObjectForKey:reactScrollView.scrollView];
        [reactScrollView setNativeScrollDelegate:nil];
      }
    }
    
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
      UIView *pinnedView = [_pinnedViews objectForKey:scrollView];
      if (!pinnedView) {
        return;
      }
    
      CGFloat distance = [[_distances objectForKey:scrollView] doubleValue];
      CGFloat y = MAX(0, distance - scrollView.contentOffset.y);
      pinnedView.transform = CGAffineTransformMakeTranslation(0, y);
    }
    
    @end

首先是类定义，oc里面是用@interface定义类的，这个和Java的interface很不一样，protocol对应Java的接口interface。  
`@interface F8Scrolling : NSObject <RCTBridgeModule, UIScrollViewDelegate>`  
init构造函数初始化了\_pinnedViews和\_distances2个变量，都是NSMapTable类型，[NSMapTable][]（顾名思义）更适合于一般意义的映射。这取决于它是如何构造的，NSMapTable可以处理的“key-to-object”样式映射的NSDictionary，但它也可以处理“object-to-object”的映射 - 也被称为“associative array”或简称为“map”。\_pinnedViews的key和value都是weak引用，\_distances的key是weak引用，value是强引用。

`@synthesize bridge=_bridge;`意思是说，bridge 属性为 \_bridge 实例变量合成访问器方法。  
也就是说，bridge属性生成存取方法是setBridge，这个setWindow方法就是\_bridge变量的存取方法，它操作的就是\_bridge这个变量。通过这个看似是赋值的这样一个操作，我们可以在@synthesize 中定义与变量名不相同的getter和setter的命名，籍此来保护变量不会被不恰当的访问。

methodQueue返回了main\_queue,规定这个组件运行在UI线程，因为它是UI组件啊  
然后是几个方法的定义，RCT\_EXPORT\_METHOD宏提供导出方法到js的能力，可以用RCT\_REMAP\_METHOD重新定义在js中的函数名，还可以让js方法异步返回Promise，下面是它的定义

/**
     * Wrap the parameter line of your method implementation with this macro to
     * expose it to JS. By default the exposed method will match the first part of
     * the Objective-C method selector name (up to the first colon). Use
     * RCT_REMAP_METHOD to specify the JS name of the method.
     *
     * For example, in ModuleName.m:
     *
     * - (void)doSomething:(NSString *)aString withA:(NSInteger)a andB:(NSInteger)b
     * { ... }
     *
     * becomes
     *
     * RCT_EXPORT_METHOD(doSomething:(NSString *)aString
     *                   withA:(NSInteger)a
     *                   andB:(NSInteger)b)
     * { ... }
     *
     * and is exposed to JavaScript as `NativeModules.ModuleName.doSomething`.
     *
     * ## Promises
     *
     * Bridge modules can also define methods that are exported to JavaScript as
     * methods that return a Promise, and are compatible with JS async functions.
     *
     * Declare the last two parameters of your native method to be a resolver block
     * and a rejecter block. The resolver block must precede the rejecter block.
     *
     * For example:
     *
     * RCT_EXPORT_METHOD(doSomethingAsync:(NSString *)aString
     *                           resolver:(RCTPromiseResolveBlock)resolve
     *                           rejecter:(RCTPromiseRejectBlock)reject
     * { ... }
     *
     * Calling `NativeModules.ModuleName.doSomethingAsync(aString)` from
     * JavaScript will return a promise that is resolved or rejected when your
     * native method implementation calls the respective block.
     *
     */
    #define RCT_EXPORT_METHOD(method) \
      RCT_REMAP_METHOD(, method)

方法pin从名字就可以知道，功能是固定view的。通过self.bridge.uiManager viewForReactTag方法获取到view。  
方法scrollViewDidScroll最后定义了pinnedView的transform动画效果,`pinnedView.transform = CGAffineTransformMakeTranslation(0, y);`。

F8v2目录下的代码文件基本上就介绍完了，Info.plist文件定义了项目的一些基本属性，包括CodePush key等的自定义属性。

## 总结 ##

f8app iOS的代码量还是比较少的，本文主要分析了AppDelegate.m和 F8Scrolling UI组件的代码。项目还用了BVLinearGradient渐变UI组件，通过工程引用的，代码也比较简单。另外还通过CocosPod引入了React，react-native-fbsdkcore，react-native-fbsdklogin，react-native-fbsdkshare，CodePush这些模块，可以参考ios/PodFile。

\[本文独立博客地址\]([http://www.offbye.com][http_www.offbye.com]）

[f8appiOS]: http://o79096vir.bkt.clouddn.com/f8a.gif
[NSMapTable]: http://www.isaced.com/post-235.html
[http_www.offbye.com]: http://www.offbye.com