# react-native-complete-demo **Repository Path**: hadoopGit/react-native-complete-demo ## Basic Information - **Project Name**: react-native-complete-demo - **Description**: 这个仓库提供了一个完整的react native app demo,包括集成 react navigation,redux,网络请求及自定义组件 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-10-13 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 一个完整、普适但不臃肿的 React Native 脚手架,具有下述特点: * React Navigation 路由导航(可以自定义单个页面进入动画); * 集成 Redux 进行状态管理,并实现本地持久化存储; * 使用 Fetch API 进行网络请求; * 自定义组件; * 自定义启动页、App 名称、appID 等; * 内嵌 H5 页面(WebView); * 网络检测(是否连接网络); * 可构建离线安装包。 [点击这里查看 Demo 展示](https://user-gold-cdn.xitu.io/2018/2/28/161d877eb7987d89?imageslim) > update 2018-04-25:由于现在 RN 及其相关插件更新频繁,如果出于学习的目的,安装依赖时最好按照 `package.json` 中指定的 package 版本进行安装,熟悉 RN 开发流程后再升级版本。 ## 开发环境及工具 * 基于 RN 0.49; * macOS High Sierra 10.13.3;Xcode 9.2;Android Studio 3.0.1; * 安卓(4.3 及以上)/ iOS(8 及以上) 已测试。 > 没有在 windows 下运行,但 RN 本身与操作系统无关,配置好环境可以开发安卓应用。 ## 本地运行 1. 下载本项目,并安装依赖包; 2. 安装 React Native CLI 及安卓/iOS 开发环境(可参考 RN 官网介绍 [Building Projects with Native Code](https://facebook.github.io/react-native/docs/getting-started.html)) 3. 进入项目根目录,执行下面命令: ```bash react-native run-ios # ios react-native run-android # 安卓 ``` > 也可通过 Xcode 打开 ios 目录下的 “项目目录” 后点 `运行` 或者 Android Studio 打开 `android` 目录后点 `运行` 启动项目。 NOTE:开发中遇到问题可参考开发这个项目过程中的 [开发记录](https://github.com/xiaogliu/step_by_step/tree/master/04_JS_Framework/1_react/react_native) ## 目录介绍 **目录结构如下:** . |-- android   |-- ios   |-- src   |     |-- assets |     |-- components |     |     |-- XgToast.js |     | |     |-- config |     |     |-- pxToDp.js |     |     |-- route.js.js |     |     |-- xgHttp.js |     |     |-- xgRequest.js |     | |     |-- redux |     |-- screens |     |     |-- ScreenHome |     |     |     |-- index.js |     |     |     |-- style.js |     |     |     |-- view.js |     |     |-- ScreenWebView |     |     |-- 其他页面文件 | |-- App.js |-- app.json |-- index.js **目录说明如下:** > `android/`   # android 原生代码(使用 android studio 要打开这个目录,如果直接打开父目录报错) > `ios/`   # ios 原生代码(使用 xcode 打开这个目录下的项目目录) > `src/`   # 放置所有原始的 react native 代码 > `src/assets/`   # 图片、样式文件 > `src/components/`   # 自定义组件目录 > `src/components/XgToast.js`   # 这个是自定义 Toast 组件 > `src/config/`   # 配置文件目录,比如路由配置 > `src/config/pxToDp.js`   # 单位自适应文件 > `src/config/route.js`   # 路由文件 > `src/config/xgHttp.js`   # 网络请求文件 > `src/config/xgRequest.js`   # 具体网络请求 API 列表 > `src/redux/`   # redux 状态管理目录 > `src/screens/`   # 所有页面文件 > `src/ScreenHome/`   # 这个目录是放具体页面文件的,为了进一步关注代码分离,里面又分为三个文件:`index.js`   # 中包含逻辑部分,`style.js` 中包含样式部分;`view.js` 中包含视图或者说页面元素部分。其他页面文件结构与此相同。 > `src/ScreenWebView/`   # 内嵌 H5 > `App.js`   # 可以理解为 react native(js 部分) 代码部分的入口文件,比如整个项目的路由在这里导入 > `app.json`   # 项目说明,主要给原生 app 打包用,包括项目名称和手机桌面展示名称 [React Native : 0.41 app.json](https://stackoverflow.com/questions/42409459/react-native-0-41-app-json) > `index.js`   # 打包 app 时进入 react native(js 部分) 的入口文件(0.49 以后安卓、ios 共用一个入口文件) ## Q & A 有同学在使用这个仓库的时候发现了问题并提了 issue,部分汇总如下,便于查看问题: 1. windows 平台开发安卓应用 `tabBarIcon` 未正确渲染 [#1](https://github.com/xiaogliu/react_native_complete_demo/issues/1) 2. 构建安卓应用时无法下载 gradle [#3](https://github.com/xiaogliu/react_native_complete_demo/issues/3) ## 其他 关于该项目更为具体的介绍可查看这两篇文章,详细介绍了开发过程: [开发 React Native APP —— 从改造官方 Demo 开始(一)](https://juejin.im/post/5a9602745188257a5c609b2f) [开发 React Native APP —— 从改造官方 Demo 开始(二)](https://juejin.im/post/5a9602c45188257a7262e3fb)