React Native 系列(三) -- 项目结构介绍

前言

本系列是基于React Native版本号0.44.3写的，相信大家看了本系列前面两篇文章之后，对于React Native的代码应该能看懂一点点了吧。本篇文章将带着大家来认识一下React Native的项目结构。由于之前的项目被我们改动了很多，因此，这里我们重新创建一个项目。

初始化 React Native 工程

• 自动创建 iOS/Android 工程和对应的JS文件，index.iOS.js,index.android.js
• 并且通过npm加载package.json里面的依赖库到node_modules文件夹中

终端执行以下命令行:

react-native init RNDemoOne --version 0.44.3

打开iOS工程，查看 Appdelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation;
    
    // 获取js文件url
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

    // 加载控件
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNDemoOne" 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;
}

• 加载控件方法：(initWithBundleURL: moduleName: initialProperties: launchOptions:)中的moduleName不能随便写，必须跟js中注册的模块名字一致。

查看index.ios.js

我是使用的webStorm，webStorm代码提示

iOS程序一启动，就会去加载这个文件，去创建组件，并且把加载完的组件显示到界面

index.ios.js 实现步骤

1. 因为需要用到JSX，所以需要加载React模块;需要用到里面Component组件，所以需要加载Component。
2. 加载AppRegistry,StyleSheet,Text,View原生组件，它们都在react-native文件夹里面。
3. 自定义组件,作为程序入口组件。
4. 创建样式表。
5. 注册组件，程序入口，程序一启动就会自动加载注册组件。

React Native语法

我们已经创建过两个React Native(简称RN)项目了，可能大部分同学看RN代码感到头疼的事情是，不知道什么时候使用{}，什么时候使用()。因此，我在这里为大家做个简单的总结，如果发现有不对的地方，欢迎纠正。

• RN中，使用表达式的时候用{}包住

  style={styles.container}
  

• RN中，在字符串中使用变量的时候用{}包住

  var str = "scott"
  <Text>{str}</Text>
  

• RN中，对象，字典需要用{}包住

  <View style={{flex:1}}></View>
  

  {flex:1}是一个字典

• RN中，创建组件必须要用()包住，因此在返回组件的时候，需要用()

  render(){
      return (
          <View style=styles.container>
          </View>
      )
  }
  

致谢

如果发现有错误的地方，欢迎各位指出，谢谢！