React Native 项目结构及运行分析(HelloWorld)

********************  RN开发环境搭建完成后,总会来一个“HelloWorld”嘚瑟一下。********************

参考资料:http://v.youku.com/v_show/id_XMTQ4OTYyMjg4MA==.html

1.创建HelloWorld (一个很恶心的地方就是:每次都得用终端输入替换镜像源的两个命令,要不然就得悲催的傻等

2.成功后,会在根目录生成HelloWorld的工程。

package.json 文件

A.name和version是package.json中最重要的两个字段,也是发布到NPM平台上的唯一标识,如果没有正确设置这两个字段,包就不能发布和被下载。

B. scripts 通过设置这个可以使NPM调用一些命令脚本,封装一些功能。

C.dependencies 指定依赖的其它包,这些依赖是指包发布后正常执行时所需要的,如果是开发中依赖的包,可以在devDependencies设置。

3.打开IOS工程,并运行。

首先会弹出一个“终端窗口”,叫做React Packager: 做打包的工具,一个微型的HTTP服务器,默认在8081端口运行,把用户写的js文件及所有依赖的第三方js文件收集在一起并打包,通过HTTP协议提供给用户创建的React Navtive应用。

 

React Native应用分为两个部分:

A.原生代码部分

B.JS代码部分

应用启动,在开发模式下(Debug),就会寻找 “index.ios” 这个文件(参考AppDelegate.m文件),“index.ios” 就是有Packager提供。Packager收集js文件通过转码(EC6 -> EC5)

IOS项目中 Icon Launch等设置没有改变

index.ios.js 文件分析持续更新......

时间: 2024-10-12 12:47:00

React Native 项目结构及运行分析(HelloWorld)的相关文章

第一个React Native项目

1>下图操作创建第一个React Native项目: 用Xcode运行界面如下: 记住: 在使用项目文件期间,终端记住不要关闭的哟!!! 改变了程序代码,需要刷新运行,使用快捷键: Command+ R,我都是在mac下的操作哟,安卓我就不涉及记录了,毕竟我不是搞安卓的...?? 2> 使用WebStrom软件进行敲代码啦....启动编译有点慢,耐心等待哟!!! 看左边的文件夹所示: Android : 表示安卓项目的文件夹; iOS : 表示iOS项目的文件夹; node_modules :

安装android Studio和运行react native项目(基础篇)

ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建 具体的路径可能和下图不一致,请自行确认. 你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效. 测试安装 react-native init AwesomeProject cd AwesomeProject react-nativ

【腾讯Bugly干货分享】React Native项目实战总结

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小时外拼成长"这是大家共同的理想.除了每天忙于工作外,我们都希望能更多地区吸收领域内的新知识与新技能,从而走向人生巅峰. Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 上一期我们邀请了腾讯SNG工程师&qu

Expo大作战--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo依赖,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战--什么是expo,如何安装expo clinet和xde,xde如何

配置React Native环境及解决运行异常

一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby": ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 等待一段时间后会出现     Press RETURN to continue

maven(三):maven项目结构及其运行机制

在上一篇中讲了如何创建maven项目,现在回到那个项目 项目结构 src/main/java:java代码目录 src/main/resources:资源目录,比如spring.xml文件,properties参数等 java和resources目录的内容都会编译到classpath下,也就是和传统项目的src目录一样的作用,这里分成多个目录是为了开发时方便管理资源 libraries:默认只有jre和maven,没有引入tomcat库,我们的项目应该可以在所有的web服务器中运行,而不仅仅是t

React Native项目实战

算是学习React Native的一次项目总结吧,目的还是提高自己. 包含的内容: 1>仿"美团"页面的实现; 2>封装项目中和自己常用的一些组件; 3>学习别人源码的项目,自己动手实现了一遍,里面添加自己的代码规范; 4>第三方开源库的使用; 5>添加项目中常见的功能和界面的实现<后面持续更新!> 传送门: https://github.com/PengSiSi/PSMeiTuan 暂时没有添加README.md,后续添加... 有兴趣的和我

react native项目增加devtools工具

第一步:安装react devtools工具 在当前项目中打开命令行,添加react devtools工具,因为运行的工具有九十几M,下载时需要时间,请耐心等待 yarn add react-devtools 第二步:配置package.json中命令 编辑package.json文件,在scripts节点中增加devtools节点,命令为 "devtools": "react-devtools" 第三步:运行react devtools命令 1.正常运行项目,使用

安装android Studio和运行react native项目(跳坑篇)

1.需配环境变量,值为sdk的地址. ANDROID_HOME  值:E:\Users\HP\AppData\Local\Android\sdk 2.下载gradle-2.14.1-all.zip 包 修改地址为本地gradle压缩包的地址,这里应该注意路径不可有带空格的,比如Program Files是会出错的. 先打开在android Studio导入项目 要导入项目android目录下才有效,如E:\Project\RN\AwesomeProject\android 启动模拟器 cmd 在