转载

ReactNative之项目结构介绍（一）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo,也可以来小码哥，了解下我们的iOS培训课程。后续还会更新更多内容,有任何问题，欢迎简书留言袁峥Seemygo。。。

ReactNative之项目结构介绍

一、初始化ReactNative工程

自动创建iOS和安卓工程，和对应的JS文件，index.ios.js，index.android.js
并且通过Npm加载package.json中描述的第三方框架，放入node_modules文件夹中

react-native init ReactDemo

二、打开iOS工程,找到AppDelegate.m文件，查看程序启动完成

注意:加载控件方法（initWithBundleURL:moduleName:initialProperties:launchOptions:）
moduleName不能乱传，必须跟js文件中注册的模块名字保持一致

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   NSURL *jsCodeLocation;    // 1.获取js文件url   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];    // 2.加载控件   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                       moduleName:@"ReactDemo"                                                initialProperties:nil                                                    launchOptions:launchOptions];   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];    // 3.创建窗口   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];   UIViewController *rootViewController = [UIViewController new];    // 4.设置窗口根控制器的View   rootViewController.view = rootView;   self.window.rootViewController = rootViewController;    // 5.显示窗口   [self.window makeKeyAndVisible];    return YES; }

三、打开index.ios.js文件，使用webStorm打开。webStorm代码提示

iOS程序一启动，就会加载这个文件，去创建组件，并且把加载完的组件显示到界面上
index.ios.js实现步骤

1.加载React模块，因为需要用到JSX，加载Compoent，需要用到里面的Compoent组件

React默认组件，Compoent非默认组件，都在react文件夹中。

2.加载AppRegistry,StyleSheet,Text,View原生组件，在react-native文件夹中
3.自定义组件,作为程序入口组件
4.创建样式表
5.注册组件，程序入口，程序一启动就会自动加载注册组件.

// 1.加载React,Componet组件 import React,{compoent} from 'react'  // 2.加载原生组件 import {     AppRegistry,     StyleSheet,     View,     Text } from 'react-native'  // 3.自定义组件,作为程序入口组件 export default class ReactDemo extends Component {      // 当加载组件的时候,就会调用render方法,去渲染组件     render(){         return (                                 )     } }  // 4.创建样式表 // 传入一个样式对象,根据样式对象中的描述,创建样式表 var styles = Stylesheet.create({     mainStyle:{         flex:1,         backgroundColor:'red'     } })  // 5.注册组件,程序入口 // 第一个参数:注册模块名称 // 第二个参数:函数, 此函数返回组件类名, 程序启动就会自动去加载这个组件 AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)

ReactNative语法

对于第一次接触ReactNative的同学，最痛苦的是什么时候使用{}，什么时候使用(),当然我也经历过那段时间，为此简单总结了下。
ReactNative中，使用表达式的时候需要用{}包住

 style={styles.mainStyle}

ReactNative中,在字符串中使用变量的时候，需要用{}包住

var str = 'hello'{str}

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

style = {},最外层表达式，用{}包住
{flex:1},对象，用{}包住

创建组件，必须要用()包住

因此只要返回组件，都需要用()

    render(){         return (                                 )     }

正文到此结束

所属分类：移动开发

本文标签： web 代码开发 IDE 参数 IOS UI list 文章 cat key ACE tar json http id js Android 微博希望 node App provider IO root 时间总结 ORM
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

ReactNative之项目结构介绍（一）

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流