前言

本系列是基于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文件夹中

终端执行以下命令行:

  1. react-native init RNDemoOne --version 0.44.3

打开iOS工程,查看 Appdelegate.m

  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  2. {
  3. NSURL *jsCodeLocation;
  4. // 获取js文件url
  5. jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  6. // 加载控件
  7. RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNDemoOne" initialProperties:nil launchOptions:launchOptions];
  8. rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  9. // 创建窗口
  10. self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  11. UIViewController *rootViewController = [UIViewController new];
  12. // 设置窗口根控制器
  13. rootViewController.view = rootView;
  14. self.window.rootViewController = rootViewController;
  15. // 显示主窗口
  16. [self.window makeKeyAndVisible];
  17. return YES;
  18. }
  • 加载控件方法:(initWithBundleURL: moduleName: initialProperties: launchOptions:)中的moduleName不能随便写,必须跟js中注册的模块名字一致。

查看index.ios.js

我是使用的webStormwebStorm代码提示

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中,使用表达式的时候用{}包住

    1. style={styles.container}
  • RN中,在字符串中使用变量的时候用{}包住

    1. var str = "scott"
    2. <Text>{str}</Text>
  • RN中,对象,字典需要用{}包住

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

    {flex:1}是一个字典

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

    1. render(){
    2. return (
    3. <View style=styles.container>
    4. </View>
    5. )
    6. }

    致谢

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

React Native 系列(三)的更多相关文章

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

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  2. 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

    http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...

  3. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  4. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  5. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. React Native 系列(七) -- ListView

    前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...

  7. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  8. React Native 系列(一)

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React Native 系列(二)

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

随机推荐

  1. C11线程管理:原子变量&单调函数

    1.原子变量 C++11提供了原子类型std::atomic<T>,可以使用任意类型作为模板参数,使用原子变量就不需要使用互斥量来保护该变量,用起来更加简洁. 举个例子,如果要做一个计数器 ...

  2. chmod及chown命令详解

    1,chmod 指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/ ...

  3. 使用HttpClient4来构建Spring RestTemplate

    Spring RestTemplate简单说明 现在REST服务已经很普及了,在我们的程序中,经常会需要调用REST API,这时候会有很多选择,原始一点的JDK自带的,再进一步点使用HttpClie ...

  4. 从零搭建SSM框架(四)手动实现Tomcat部署

    发布War包 Windows环境部署 增加如下配置 <Context path="/" docBase="cnki" debug="0" ...

  5. 【BZOJ】2049: [Sdoi2008]Cave 洞穴勘测 LCT

    [题意]给定n个点和m个操作,每次操作:1.连接2个点.2.断开2个点.3.查询2个点是否连通.m<=2*10^5. [算法]Link-Cut Tree [题解]LCT模板题,Link,Cut, ...

  6. 【leetcode 简单】第二十二题 对称二叉树

    给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2,2,null,3,nul ...

  7. java使用simpleDateFormat格式化日期 时间

    时间日期标识符: yyyy:年 MM:月 dd:日 hh:1~12小时制(1-12) HH:24小时制(0-23) mm:分 ss:秒 S:毫秒 E:星期几 D:一年中的第几天 F:一月中的第几个星期 ...

  8. 64_t2

    texlive-biblatex-chem-doc-svn42065-33.fc26.2.no..> 24-May-2017 15:44 1044190 texlive-biblatex-che ...

  9. javascript 之数据类型--01

    写在前面 国庆整理资料时,发现刚开始入门前端时学习JS 的资料,打算以一个基础入门博客记录下来,有不写不对的多多指教: 先推荐些书籍给需要的童鞋 <JavaScript 高级程序设计.pdf&g ...

  10. What does “=>” mean in import in scala?(转自StackOverflow问答)

      As others have mentioned, it's an import rename. There is however one further feature that proves ...