如何使用模版快速构建react-native项目

缺乏、安全感 2022-05-26 04:57 256阅读 0赞

#### 前言 ####

我们在开始搭建项目的时候，很多时候都是使用同一套架构，基本不会发生很多变化，有没有什么方法，能够进行批量化搭建项目，在react-native中就有一个简单的方法，搭建属于自己的模板方法，那就是使用命令行`--template`进行创建项目

#### 常规方法 ####

通常情况下，我们使用下面命令行进行项目搭建，如下面代码：

react-native init projectName

使用上面命令就会生成如下代码结构：  
![react-native init projectName生成项目][react-native init projectName]  
当我们进行通过使用下面命令

react-native init projectNameTemplate --template common

进行项目创建时，就能够生成我们自己自定义的项目，在上面这段命令行中，`common`指的是我在npm上发布的一个package,该包的全名是`react-native-template-common`，并且要能够在react-native中通过命令参数`--template`命令调用，必须使用下面这样的形式发不到npm官方仓库，形式如下所示：

react-native-template-包名称

请点击访问 [common包在npm中的位置][common_npm] ，如果想要查看具体代码可以到github进行查看[common项目][common]，项目结构如下所示：  
![common项目github项目结构][common_github]  
交代完上面准备工作之后，我们能够进行通过该命令进行项目的创建，如下，使用命令行创建之后的目录结构  
![使用模板创建的react-native项目][react-native]  
在创建之后，我们就可以通过如下说明信息进行运行项目

To run your app on iOS:
       cd E:\projectTest\projectNameTemplate
       react-native run-ios
       - or -
       Open ios\projectNameTemplate.xcodeproj in Xcode
       Hit the Run button
    To run your app on Android:
       cd E:\projectTest\projectNameTemplate
       Have an Android emulator running (quickest way to get started), or a device connected
       react-native run-android

#### 参考文章 ####

1.[使用 template 创建 React Native 应用更省时间][template _ React Native]

[react-native init projectName]: /images/20220526/346223aac59f4fb9ad68b2e083b03a32.png
[common_npm]: https://www.npmjs.com/package/react-native-template-common
[common]: https://github.com/suwu150/react-native-template-common
[common_github]: /images/20220526/64e75cccc2ef4bdebd52eb267232ae3f.png
[react-native]: /images/20220526/3f4a91fbd0174908ba5a840d289fe4a8.png
[template _ React Native]: https://mp.weixin.qq.com/s?__biz=MzA3NjgyNzk2Mw%3D%3D&mid=2247483767&idx=1&sn=25d10d234ab36a688311b94c9b9a5d80&pass_ticket=6loBS5HzvunBMvbOGdQ0yUx1dTJQ3WUznuI0Lsm2nKc%3D