在 React Native 开发中，使用合适的模板可以大大提高开发效率，并保证开发质量。koality-react-native-template 就是一款优秀的 React Native 模板，其集成了许多实用的功能，如 Redux 状态管理、React-Navigation 进行导航等，而且还非常易于使用。本文详细介绍如何使用 koality-react-native-template 模板进行 React Native 开发。
安装
首先，我们需要安装 koality-react-native-template。在使用模板之前，你需要先安装 Node.js 和 React-Native CLI。接着，你可以运行以下命令进行安装：
npx react-native init MyApp --template koality-react-native-template
这个命令将会创建一个名称为 MyApp 的新项目并会把 koality-react-native-template 作为初始化模板。
我们也可以选择在 GitHub 上 clone 模板代码、解压到本地然后使用以下命令进行安装：
npx react-native init Myapp --template file:/<path to koality-react-native-template> # For example npx react-native init Myapp --template file:/Users/XXX/Desktop/koality-react-native-template
经过这一步，我们已经可以使用 koality-react-native-template 了。
目录结构
使用 koality-react-native-template 创建的项目，目录结构如下：
-- -------------------- ---- ------- - --- ------------- --- ---- - --- ------- - --- ------- - --- ------- - --- ----------- - --- -------- - --- ------ --- -------- --- -------- --- ------------ --- ------------ --- ---------- --- ----------- --- -------- --- -------- --- --------------- --- ---- --- --------------- --- ------------
其中：
node_modules/：项目依赖的第三方库。src/：应用代码所在目录。src/assets/：存储应用所需的静态资源。src/common/：存储项目中所有公共的组件、函数、工具类等。src/config/：项目的配置文件所在目录。src/navigation/：存储应用的导航相关代码。src/screens/：存储应用页面代码。src/store/：存储 Redux 的相关配置文件。index.js：应用的入口文件。.babelrc：Babel 配置文件。.env.example：用于存储环境变量的示例文件。.eslintrc.js： ESLint 配置文件。.gitignore： Git 文件忽略设置。.prettierrc： Prettier 配置文件。android/：Android 平台应用代码所在目录。app.json：应用配置文件，用于定义应用的元数据，如应用名、icon 等。babel.config.js：Babel 配置文件。ios/：iOS 平台应用代码所在目录。metro.config.js： Metro 配置文件。package.json：项目的配置文件。
模板特性
koality-react-native-template 集成了众多 React Native 常用的模块，以及业界常用的代码规范：
- 集成React Navigation及其相关代码，帮助使用者快速开发应用的导航功能。
- 集成Redux及其相关代码，帮助使用者管理应用的状态，使得整个应用状态管理变得更加工程化。
- 集成Axios及其相关代码，使得应用的网络请求变得更易于开发、调试。
- 集成Eslint及Prettier等代码格式化工具，便于开发者维持高一致性的代码规范。
示例应用
让我们现在来看一个 koality-react-native-template 创建的示例应用。
首页
打开 src/screens/HomeScreen.js 文件，我们可以看到示例应用的首页演示了一些基础的 React Native 组件的使用，以及页面之间的相互导航。
Redux 配置
在 src/store/ 目录下，我们可以找到示例应用的 Redux 相关代码，包括 actions、reducers、selectors 以及 types。
其中 actions 存储 Action Creators，reducers 存放 Reducers，selectors 存储从 State 中选择状态的方法，types 存放所有的类型常量，方便在应用中引用。
网络请求
在 src/common/api.js 中存放了本应用的所有网络请求相关的代码，本应用使用的是 Axios 库， Axios 库是一款在浏览器和 Node.js 中使用的基于 promise 的 HTTP 客户端，让我们可以实现更加灵活的网络请求。
结语
在本文中，我们详细介绍了如何使用 koality-react-native-template 以及其相关特性，希望您可以在后续的 React Native 开发中有所收获。
完整示例代码可以在 GitHub 中获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ea81e8991b448d4fb2