[关闭]
@linux1s1s 2017-04-18T19:53:26.000000Z 字数 1733 阅读 2123

React-Native Primary 项目结构

React-Native 2017-03


在学习项目结构之前,先来探讨一个问题:

问题

如何指定RN版本?

解决方案

该解决方案参考创建 React-Native 工程时,如何指定特定的 React-Native 版本,特此说明。

  1. npm i -g rninit

默认使用RN最新版本

  1. rninit init [Project Name]

使用指定RN版本

  1. rninit init [Project Name] --source react-native@0.41.2

使用Git Repo.

  1. rninit init [Project Name] --source git+https://github.com/facebook/react-native.git#v0.14.2

参数解释

--source 参数的格式其实就是所有 npm install 支持的参数格式

原本 react-native 支持的 --verbose 参数仍然被支持:
这样你可以看到 npm 安装过程中的详细输出信息。

  1. rninit init [Project Name] --source react-native@0.14.2 --verbose

配置工具WebStrom

目录结构

此处输入图片的描述

入口【index.android.js】

此处输入图片的描述

详细的解释如下:

1)组件导入区: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入
2)核心代码区:所有逻辑代码编写的地方
3)组件样式区:render()方法中用到的组件的样式,可以集中在这里编写
4)注册启动组件:组件只有注册后才能运行。这里用到的AppRegistry也需要在组件导入区进行导入

打离线bundle包

  1. react-native bundle

上面的命令用来打离线bundle包,我们先通过cmd查看该命令的具体用法

此处输入图片的描述

我们将上面的英文翻译如下:

react-native bundle [参数]
  构建 js 离线包 

Options:

-h, --help                   输出如何使用的信息
--entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
--platform [string]          ios 或 andorid
--transformer [string]       Specify a custom transformer to be used
--dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
--prepack                    当通过时, 打包输出将使用Prepack格式化
--bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string]  生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string]       打包时图片资源的存储路径
--verbose                    显示打包过程
--reset-cache                移除缓存文件
--config [string]            命令行的配置文件路径

所以我们可以这样给出如下生成bundle包的命令

  1. react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false

需要在根目录下,首先自建bundle目录,生成以后的bundle包如下

此处输入图片的描述

参考:

给所有开发者的React Native详细入门指南(第一阶段)

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注