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

我是使用的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中,使用表达式的时候用{}包住 style={styles.container}
  • RN中,在字符串中使用变量的时候用{}包住 var str = "scott" <Text>{str}</Text>
  • RN中,对象,字典需要用{}包住 <View style={{flex:1}}></View> {flex:1}是一个字典
  • RN中,创建组件必须要用()包住,因此在返回组件的时候,需要用()

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

HQ移动20170218期周报

1. Duplicate interface definition for class 错误

1032
来自专栏不止是前端

React下ECharts的数据驱动探索

使用过Vue React框架我们就知道,我们不再更改某个DOM的innertext和innerhtml属性就能完成视图的改变,两者都是通过对状态的改变,唤起 v...

1754
来自专栏青青天空树

nodejs构建多房间简易聊天室

  本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下。

2841
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 启动白屏问题解决方案,教程

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 目录 问题描述 问题分析 Android启动白屏解决...

5186
来自专栏大内老A

如何解决jQuery Validation针对动态添加的表单无法工作的问题?

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂...

2019
来自专栏iOS技术杂谈

NSNotificationCenter 通知的使用方法详解你要知道的KVC、KVO、Delegate、Notification都在这里

你要知道的KVC、KVO、Delegate、Notification都在这里 转载请注明出处 https://cloud.tencent.com/develop...

4936
来自专栏刺客博客

鼠标左键javascript代码分享

2594
来自专栏文大师的新世界

4. Navigation实战

本来想写一个应用redux的Navigation实战,但是发现react-native有又新的更新,新手怕误导大家,就直接用了别人的组件,看看怎么应用吧。本次在...

872
来自专栏每日一篇技术文章

weex-31-接入iOS完整步骤

由于WeexSDK 中没有图片下载功能,所以需要我们自己定义,其实也比较简单,创建一个类 实现两个协议即可

1511
来自专栏向治洪

React Native自定义导航条

Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换。在React Native中RN...

1998

扫码关注云+社区

领取腾讯云代金券