Question

这一章就讲到这里了，在开始下一章的学习之前，做一个小练习吧。

练习内容

创建一个新的 React Native 视图，然后将这个视图放到一个视图控制器中，设置视图的背景样式为蓝色。

请尽量自己完成练习。如果你是 iOS 开发初学者，我建议你还是学习一些基本的 Objective-C 知识。

答案

首先打开 Xcode 并且创建两个文件：MyViewController.h 和 MyViewController.m。文件中的代码如下：

// MyViewController.h
#import <UIKit/UIKit.h>
#import "RCTRootView.h"
@interface MyViewController : UIViewController
@property (weak, nonatomic) NSDictionary ＊launchOptions;
@end

// MyViewController.m
#import "MyViewController.h"

@implementation MyViewController
- (void)viewDidLoad
{
  [super viewDidLoad];
  NSURL ＊jsCodeLocation;
  jsCodeLocation =
      [[NSBundle mainBundle] URLForResource:@"main"
                                withExtension:@"jsbundle"];

  RCTRootView ＊rootView =
      [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                    moduleName:@"AdmobTest"
                                launchOptions:self.launchOptions];
  rootView.frame = CGRectMake(0, 50, viewRect.size.width,
                                      viewRect.size.height - 50);
  [self.view addSubview:rootView];
}
@end

现在修改 SampleApp 中 AppDelegate.m 文件的内容：

#import "AppDelegate.h"
#import "MyViewController.h"
@implementation AppDelegate

(BOOL)application:(UIApplication ＊)application
    didFinishLaunchingWithOptions:(NSDictionary ＊)launchOptions
{
  //NSURL ＊jsCodeLocation;

  // 加载 JavaScript 代码，按照你自己的需求将相应的内容取消注释
   /＊ 选项 1
    ＊ 从开发服务器加载文件，从代码仓库的根目录启动服务器：
    ＊
    ＊ $ npm start
    ＊
    ＊ 在设备上运行时，将 'localhost’修改成你电脑的 IP 地址。并且


    ＊ 需要确认你的电脑和 iOS 设备在同一个 Wi-Fi 网络环境中。


    ＊ jsCodeLocation = [NSURL URLWithString: @"http://localhost
      :8081/index.ios.bundle"];
    ＊/

   /＊ 选项 2
    ＊ 通过磁盘中预绑定文件加载。重新生成静态包，运行命令


    ＊
    ＊ $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
    ＊
    ＊ 并且将下面一行代码释放出来


    ＊ jsCodeLocation = [[NSBundle mainBundle]
    ＊                               URLForResource:@"main"
    ＊                                withExtension:@"jsbundle"];
    ＊/

  RCTRootView ＊rootView =
        [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                    moduleName:@"AwesomeProject"
                                  launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[
    UIScreen mainScreen].bounds];
  // UIViewController ＊rootViewController = [[
    UIViewController alloc] init];
  /＊ 将上面的代码替换为

 ＊/
  MyViewController ＊rootViewController = [[MyViewController alloc]
      init];
  rootViewController.launchOptions = launchOptions;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

如你所见，我注释掉了所有默认的 SampleApp 代码，然后添加了上面创建好的 MyViewCon-troller 的相关内容。试着编译并运行这个项目，你就能够理解 React Native 视图了。