简介
在前端开发中，React Native 是一种十分流行的移动应用开发框架。而 generator-react-native-2 是一个 React Native 应用程序的生成器，它可以帮助前端开发者更加高效地创建 React Native 应用程序。
该文章将向你介绍如何安装、配置以及使用 generator-react-native-2。
安装
首先，你需要先安装 Node.js 和 npm。Node.js 安装过程此处省略，读者可以在官网 https://nodejs.org 下载并安装。
接着，你需要将 generator-react-native-2 安装到全局，运行以下命令：
npm install -g yo generator-react-native-2
这样，你就安装好了 generator-react-native-2。
使用
在你创建 React Native 应用程序之前，确保你已经安装了 react-native-cli 和 yarn：
npm install -g react-native-cli yarn
接着，运行以下命令：
yo react-native-2
接下来，你会被要求输入要创建的项目名称，并选择你要安装的第三方库。
项目结构
一个生成的 React Native 项目包含如下目录和文件：
-- -------------------- ---- ------- --- ---------- - --- ----------- - --- -------------- - --- ---------------- - --- -------------------- - --- ---------------- --- -------- - --- ---- - - --- ------------ - - --- ---- - - --- ----- - - --- ----- - --- ------------ - --- ------- - --- ----------------- - --- ------- - --- ----------- - --- --------------- --- ---- - --- ---- - - --- ------------- - - --- ------------- - - --- ---------------- - - --- ----------- - - --- ---------- - - --- ---------------- - - --- ------ - - --- ------------------- - --- -------------- - --- ------- --- ---- - --- ----------- - - --- --------- - - --- ------- - - --- --------- - - --- -------- - - --- ---------- - --- ------- - - --- --------- - --- -------- - - --- ------- - - --- -------- - --- ------ - --- ----------- - --- -------- --- -------- --- ------------ --- --------------- --- -------------- --- ---------- --- -------- --- ------------ --- --------- --- ---------
其中，src 目录用来存放 React Native 组件。android 和 ios 目录分别用来存放 Android 和 iOS 项目相关的配置和代码。.babelrc 用来配置 Babel，.eslintrc.js 用来配置 ESLint，.prettierrc.js 和 .prettierignore 用来配置 Prettier，app.json 用来配置应用程序元数据。README.md 和 yarn.lock 分别用来描述项目和用来锁定项目依赖。
使用示例
在以下例子中，我们将创建一个简单的登录页，在该页中，用户可以输入用户名和密码，并在点击 “登录” 按钮后向服务器发送请求。
首先，运行以下命令创建 React Native 项目：
yo react-native-2
接着，打开 src/screens/Login.js 文件，输入以下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ----- ---- ----------------------
------ ------ ---- -----------------------
------ ------ ---- -----------
------ ------- -------- ------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------------------- - ------- -- -------------------
----- -------------------- - ------- -- -------------------
----- ----------- - -- -- -
--------------------- ----------
--
------ -
----- -------------------------
----- ------------------------------
------
-----------
--------------------
----------------
-------------------------------
--
------
----------
-------------------
----------------
-------------------------------
---------------
--
------- ---------- --------------------- --
-------
--
-接着，还需创建 src/components/Input.js 和 src/components/Button.js 两个组件：
-- -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ - ---------- ----- ---- - ---- ---------------
------ ------ ---- -----------
------ ------- -------- ------- ------ ------------ ------ --------- --------------- - ----- -- -
------ -
----- ---------------------
----- -----------------------------------
----------
--------------------
-------------------------
-------------
-----------------------
---------------------------------
--
-------
--
-
-- ------------------------
------ ----- ---- --------
------ - ----------------- ---- - ---- ---------------
------ ------ ---- -----------
------ ------- -------- -------- ------ ------- -- -
------ -
----------------- --------------------- ------------------
----- -----------------------------------------
-------------------
--
-最后，在 src/screens/styles.js 文件中，添加以下样式：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
------ ------- -------------------
---------- -
----- --
-------- ---
---------- ---
--
------ -
--------- ---
----------- -------
------------- ---
--
------ -
------------- ---
--
------ -
----------- -------
------------- ---
--
------ -
------------ --
------------ -------
------------- --
-------- ---
--------- ---
--
------- -
---------------- -------
-------- ---
------------- --
----------- ---------
------------- ---
--
------------ -
------ --------
----------- -------
--------- ---
--
---至此，一个简单的登录页就创建完成了。
结论
本文介绍了如何使用 generator-react-native-2 快速创建一个 React Native 项目，并提供了一个简单的示例。
通过本文，你将了解到如何使用该工具生成项目并基于此构建项目，提高了产品发布的效率和准确性。
同时，本文和示例也可以帮助初学者快速开始 React Native 开发工作，重点介绍了 React Native 开发中关键的模块和技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557bc81e8991b448d4c62