React-Native iOSapp开发认识相关文件_2

学习一个新的东西之前类比很重要,所谓万变不离其中.从创建app来说 rn 类比 xcode 相对应的一些东西.

2.1rn怎么让app显示

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

/*
  index.ios  绑定入口文件
*/
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];  

/*
fristProject 注册的标识,就像iOS 的 WKWebView 注册某个标识然后只能通过该标识才能让其响应
*/
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"fristProject"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

/*
把该控制器作为根控制器
*/
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

只有根控制器,说明用rn创建出来的app所有东西都是渲染在根控制器的view上面

2.2解剖js

2.2.1引入相关的类

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
相当于iOS中的
#import "AppDelegate.h"

2.2.2类的主题

class AwesomeProject extends Component {
}
相当于iOS中的
@implementation 
@end

2.2.3界面渲染方法

render() {}
 相当于iOS中的
-(void)viewDidLoad{}

2.2.4构造方法

constructor(props)
{
  super(props);
//  初始状态
  this.state = {states:1};
}
相当于iOS中的
initialize (初始化方法执行在render（）之前)

2.2.5app初始化化

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
相当于iOS中的
int main(int argc, char * argv[]) {
  @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  }
}

2.2.6样式

const styles = StyleSheet.create({}）
对比ios的，所有改变控件颜色，大小，字体，位置....