使用项目模板创建 React Native App

2018-05-17 admin

阅读前,请注意版本与时效性!

部分内容翻译自 medium.com/dailyjs/the…

什么是项目模板

简单来说,项目模板是一个包含你自己基础 Codebase 的脚手架(熟悉 RoR 的同学应该不陌生)。一旦项目模板创建后,你便可以在不同项目间中使用它,达到复用目录结构、快速构建项目的目的。有可能你会说——“哇,我从来没有使用过,这是一个多么新鲜的功能啊!”,但是事实是——每一次你利用 react-native init 创建应用的时候,react-native-cli 都会从 HelloWorld 这个预设的模板中创建应用,而非从头(Build from Scratch)构建起。也就是说

react-native init AwesomeProject

等于是

react-native init AwesomeProject --template HelloWorld

React Native 预设有两个模板,一个是 HelloWorld,一个是 HelloNavigation,你可以在 这里 看到。

创建项目模板的步骤

  1. 创建一个符合命名规范的 npm 项目
  2. 放入自己的 Codebase,整理目录结构,修改部分配置文件名称
  3. Publish & Use

听起来挺简单的?那我们开始一步步操作吧!

  1. 创建 npm 项目

因为目前脚本的一些 限制,对于 npm registry 上的 template,仅支持前缀为 react-native-template- 的命名,所以你也要遵循相同的命名法则。

创建好文件夹,在终端中键入 npm init,填入相应的信息,完成 npm 项目的初始配置。

  1. 放入自己的 Codebase,整理目录结构

我自己的 Codebase 目录结构在 f8app 的基础之上进行了修改,仅供参考:

需要注意的是,HelloWorld 在这里是一个全文的关键词,将会被通过 react-native init 传入的项目名称所替换,小写的 HelloWorld 也会被替换成对应名称的 小写形态。如果你要在新的 App 中使用到新的项目名称,这里填入 HelloWorld 即可达到自动修改的目的。

接着,将 dependencies 和 devDependencies 分别创建两个文件 dependencies.jsondevDependencies.json,放入期望引入的依赖和开发依赖,例如:

{
    "react-navigation": "^1.0.0-beta.15"
}

React Native 0.54.4 版本之后,支持从项目模板中引入 devDependencies 的功能,具体的讨论请参考 github.com/facebook/re…

如果你需要自定义 .babelrc 或者是 .flowconfig,将前缀的 . 替换成 _ 放入项目模板中,目前 支持

  • _gitattributes
  • _babelrc
  • _flowconfig
  • _buckconfig
  • _watchmanconfig

的文件名替换,因为是递归查找替换,所以非根目录的这些文件的名称也会被替换。

  1. 将此 npm 包上传至公有或者私有的 npm registry

使用项目模板

在前文中提到的,要是用模板创建 React Native 应用,仅需在 react-native init 时指定 --template ,这里的参数可以是某个 npm 包名、file://http://https:// 或者 git://,如果你使用的是 npm 包名的这种形式话,此处切记 不要输入指定的前缀,否则会出错,提示找不到该 npm 包,因为此过程会自动加上前缀。

// 你的 npm 包命名应该形如 react-native-template-{template-name}
react-native init AwesomeProject --template template-name

在此过程中,如果有原生的组件需要 react-native link 的操作,也会一并执行。

这里原文作者给出了一个 React Native 的项目模板:

github.com/geirman/rea…

Fin.

由于这个功能必须通过 react-native-cli 来使用,这就需要开发者有 Xcode 或者是 Android Studio 的开发环境。如果 create-react-native-app 能够在未来加上这个功能的话那就更棒了!

通过项目的模板,一个公司内部的 React Native 应用可以构建于同一个 Codebase 之上,显著降低了配置花费的时间成本。

References:

原文链接:https://blog.evianzhow.com/build-react-native-apps-with-template/

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32382.html

文章标题:使用项目模板创建 React Native App

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
HTML5渐行渐近 APP还能走多远
鎽樿�侊細浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嬪�栥€傚湪鍙栧緱杈夌厡鎴愮哗鐨勫悓鏃讹紝APP涔熷悓鏍烽潰涓寸潃璇稿�氶毦浠ラ€捐秺鐨勯殰纰嶃€� 鍦ㄧ粡鍘嗕簡闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡滅啛钂傝惤銆佹�e紡瀹...
2015-11-12
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
使用 Protocol Buffers 代替 JSON 的五个原因
在 Ruby 和 Rails 开发者中,面向服务 (Service-Oriented) 架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点。这些新生小巧的服务通常继续使用 Rails 或 ...
2016-01-13
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML <div clas...
2017-03-17
如何使用JavaScript
一、应用<script>标签加入JavaScript 任何脚本语言均可以通过<script>…</script>标记对加入到HTML代码中(即是加入到网页文档<html>…</html&...
2015-11-12
回到顶部