简介
generator-rocketnative是一个针对React Native应用开发的npm包。它作为生成器（generator）被设计为一个可安装用于自动生成React Native app脚手架的命令行工具。通过执行该命令行工具，前端开发人员可以更快速地创建一个新的React Native项目，并在工作中节省了大量的时间和精力。
本篇技术文章的主要目的是介绍如何使用generator-rocketnative来快速创建一个React Native项目，并了解其使用方法。
安装generator-rocketnative
第一步是安装npm包generator-rocketnative，可以通过以下命令来安装它：
npm install -g yo generator-rocketnative
这个命令会在全局范围内安装yo和generator-rocketnative，并且添加generator-rocketnative作为一个可用的generator到你的系统中。
使用generator-rocketnative创建React Native项目
一旦generator-rocketnative被安装到你的系统中，你可以通过以下步骤来使用它来创建一个React Native项目：
- 首先，创建一个空项目文件夹，并在该文件夹下通过命令行执行：
yo rocketnative
- 接下来，会出现一个交互式的命令行界面，你需要输入一些关于你的项目的信息来配置项目。如图所示：
- 然后你需要选择你需要添加的功能或组件，如图所示：
- 最后，运行npm install安装依赖包并开始开发吧！
生成器生成的React Native项目结构
生成器会自动生成React Native的项目结构，并默认包含一些已经配置好的组件和功能，核心代码都放在app文件夹中。此外，你可以在根目录下看到.fastlane和ios文件夹，.fastlane文件夹包含了Fastlane自动化工具的配置信息，ios文件夹包含了iOS应用程序的代码。
下面是app文件夹的结构：
- app
- actions
- exampleActions.js
- components
- exampleComponent.js
- containers
- exampleContainer.js
- reducers
- exampleReducers.js
- store
- configureStore.js
- app.js
- actions
其中，actions文件夹包含了Redux actions，components文件夹包含了重用的组件，container文件夹包含了专门为Redux构建的container组件，reducers文件夹包含了Redux reducers，store文件夹包含了Redux store的配置信息，app.js文件是你的应用程序的入口文件。
典型的React Native项目开发
下面是一个典型的React Native项目开发流程，我们以已创建的React Native项目为例，来介绍一下建立一个新的React Native应用的过程。
- 在app文件夹下创建一个新的React组件
我们在components文件夹下创建了一个名为ExampleComponent的新组件，并将其代码放在ExampleComponent.js文件中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----
----
- ---- ---------------
------ ------- ----- ---------------- ------- --------- -
-------- -
------ -
------
---------------------
-------
--
-
-- 在app.js文件中引用ExampleComponent组件
我们需要在app.js文件中导入并使用ExampleComponent组件，因此我们在第一行导入ExampleComponent：
// app.js import ExampleComponent from './components/exampleComponent';
使用ExampleComponent：
<View> <ExampleComponent /> </View>
- 编写Redux action和reducers来控制ExampleComponent组件中的文本
为了改变ExampleComponent中的文本，我们需要编写两个新的Redux部分。首先，我们在actions文件夹中创建一个新文件exampleActions.js，该文件导出一个命名为changeText的action:
export function changeText(text) {
return {
type: 'CHANGE_TEXT',
text: text
};
}该action的作用是将传入的文本text存储在Redux store中。然后，我们在reducers文件夹中创建一个新文件exampleReducers.js，该文件导出一个新的reducer函数：
-- -------------------- ---- -------
----- ------------ - -
----- ------
--
------ ------- -------- --------------------- - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
----- -----------
--
--------
------ ------
-
-reducer函数用于将Redux store中保存的文本更改为新文本。当前文本保存在Redux store的state对象中，action参数包含用于更改该文本的新文本。reducer必须根据action的type属性返回一个新的state对象。
- 通过Redux Connect连接React组件到Redux store
现在，我们可以编写一个新的container组件ExampleContainer.js，该组件将ExampleComponent和Redux store连接起来：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ---------------- ---- ---------------------------------
------ - ---------- - ---- ----------------------------
----- --------------- - ------- -- -
------ -
----- --------------------------
--
--
----- ------------------ - ---------- -- -
------ -
------------- ------ -- -
---------------------------
-
--
--
------ ------- ------------------------ --------------------------------------该container将Redux的state映射到ExampleComponent的props（text），并通过dispatch将修改后的文本的action传递给Redux store。
- 运行React Native应用
现在，我们已经完成了React Native应用程序的编写，我们可以运行以下命令：
react-native run-ios
或者
react-native run-android
我们应该看到我们的ExampleComponent出现在模拟器中，并且当我们更改Redux store中的文本时，它的文本也相应地发生了更改。
总结
在本篇文章中，我向大家介绍了如何使用npm包generator-rocketnative来创建一个React Native项目，并展示了该项目的文件结构和重要组件的作用。此外，这个教程中还提供了一个简单的例子来演示如何利用Redux将文本添加到组件中。
希望这篇文章能够成为你React Native开发的有益指导，让你更快地掌握这种易于开发的技术，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601981e8991b448de3e9