React Native工程启动流程

一、React Native工程结构分析

1) 初始化RN工程
react-native init LKDemo2
2) 工程目录结构图
工程目录结构图
3)工程启动流程分析
  • iOS工程或安卓工程一启动,就会加载目录中index.js文件,通过AppRegistry去注册组件,并且把注册完成的组件输出给iOS端或Android端:
// 引入注册组件模块
import {AppRegistry} from 'react-native';
// 引入组件汇总模块
import App from './App';
// 引入输出组件名称
import {name as appName} from './app.json';

// 注册组件,程序主入口
// appName: 注册模块名称
// () => App: 组件类,程序启动会自动加载该类实例化的组件对象
AppRegistry.registerComponent(appName, () => App);
  • 通过Xcode打开iOS工程,或者Android Studio打开Android工程,此处以iOS端为例子。找到AppDelegate.m文件,查看客户端加载方法:
AppDelegate.m
  • 代理文件中通过该方法加载JS端输出的模块,注意模块的名称两端必须保持一致:
initWithBridge:bridge moduleName:@"MyRNDemo" initialProperties:nil
  • 代理文件解析加载注释如下
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 1. 获取桥接文件
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  // 2. 根据模块加载根视图
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MyRNDemo"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  // 3. 设置窗口
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  
  // 4. 设置窗口根控制器的view
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  
  // 5. 显示窗口
  [self.window makeKeyAndVisible];
  return YES;
}
4)App.js文件运行步骤
  • 加载React模块,使用其内部的API,比如:jsx语法;
  • 加载React Native原生组件,比如:SafeAreaView, StyleSheet, View, Text,Image等;
  • 自定义组件类,作为模块的输出;
  • 创建样式对象,传入样式对象,根据样式中的对象描述,创建样式表
  • 导出当前模块
/**
 * 撩课学院
 * https://itlike.com
 */

// 1. 加载React模块
import React from 'react';

// 2. 加载原生组件
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  Image
} from 'react-native';


// 3. 自定义组件(程序入口组件)
const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeView}>
         <View style={styles.viewStyle}>
           <Image
               style={{width: 168, height: 168}}
               source={{uri: 'http://www.itlike.com/template/simple/res/404/img/xiaoliao.png'}}
           />
           <Text style={styles.textStyle}>小撩陪你开启RN学习之旅!</Text>
         </View>
      </SafeAreaView>
    </>
  );
};

// 4. 创建样式对象
// 传入样式对象,根据样式中的对象描述,创建样式表
const styles = StyleSheet.create({
  safeView: {
    flex: 1
  },
  viewStyle: {
    display: 'flex',
    flex: 1,
    justifyContent:'center',
    alignItems: 'center'
  },
  textStyle: {
    fontSize: 20
  }
});

// 5. 导出当前模块
export default App;

二、React Native语法分析

1)JSX语法

JSX语法是一个比较高级但很直观的JS语法糖。我们在创建View的结构是,可以用类似HTML标签的形式创建,当然最终在编译是还是会转换成JS代码。

  • 函数中只要返回组件,都需要用()包裹
const App: () => React$Node = () => {
  return (
      <View></View>
  );
};
  • 函数中除字符串以外,赋值时都需要用{}包裹
 <SafeAreaView style={styles.safeView}> </SafeAreaView>
 <Image style={{width: 168, height: 168}} source={{uri: 'http://www.itlike.com/template/simple/res/404/img/xiaoliao.png'}}
           />
  • 组件内使用变量时,都需要用大括号包裹,否则会被当成普通字符串处理。
const str = '撩课学院';
<Text>{str}</Text>
2)样式对象文件

内部以键值对的形式,取值如同JS中的对象调用。

const styles = StyleSheet.create({
  viewStyle: {
    display: 'flex',
    flex: 1,
    justifyContent:'center',
    alignItems: 'center'
  }
});

推荐阅读更多精彩内容