{"id":20066838,"url":"https://github.com/tedqb/rn_project_txt","last_synced_at":"2026-05-13T06:03:37.694Z","repository":{"id":38960192,"uuid":"183843207","full_name":"tedQB/RN_project_txt","owner":"tedQB","description":"一个github_reactNative 上手项目","archived":false,"fork":false,"pushed_at":"2023-01-03T20:34:59.000Z","size":5472,"stargazers_count":1,"open_issues_count":15,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-12T23:23:21.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tedQB.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-28T02:16:38.000Z","updated_at":"2023-03-08T16:18:44.000Z","dependencies_parsed_at":"2022-08-26T02:11:19.284Z","dependency_job_id":null,"html_url":"https://github.com/tedQB/RN_project_txt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedQB%2FRN_project_txt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedQB%2FRN_project_txt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedQB%2FRN_project_txt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedQB%2FRN_project_txt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tedQB","download_url":"https://codeload.github.com/tedQB/RN_project_txt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241494180,"owners_count":19971871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T13:59:59.819Z","updated_at":"2026-05-13T06:03:37.617Z","avatar_url":"https://github.com/tedQB.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# About\n\n基于ReactNative的项目，后台接口基于github Trending官方数据。\n项目package.json内使用的模块，组件全部为官方目前最新版本，向后兼容。\n\n项目功能主要有查看最新github最热项目，最热项目，收藏项目，个人中心，换肤功能，还有一些react-native基础组件的demo等等，\n适合新手fork下来学习使用\n\n特别感谢 crazycodeboy 提供的react-native教程及项目\n\n\n## 项目运行\n\n\n```\ngit clone https://github.com/tedQB/RN_project_txt \n\nreact-react run-ios/android\n\n```\n\n## 预览\n\u003cimg src=\"https://github.com/tedQB/RN_project_txt/blob/master/img/02.png?raw=true\" width=200\u003e\u003cimg src=\"https://github.com/tedQB/RN_project_txt/blob/master/img/03.png?raw=true\" width=200\u003e\u003cimg src=\"https://github.com/tedQB/RN_project_txt/blob/master/img/04.png?raw=true\" width=200\u003e\u003cimg src=\"https://github.com/tedQB/RN_project_txt/blob/master/img/05.png?raw=true\" width=200\u003e\n\n## 目标功能\n\n- [x] Redux/React-redux接入 -- 完成\n- [x] 导航配置 --完成\n- [x] 收藏喜欢的项目 -- 完成\n- [x] 多种颜色主题自由切换 -- 完成\n- [x] 可以订阅 50 多种编程语言项目 -- 完成\n\n\n## 待实现功能\n\n- [ ] 热更新codepush\n- [ ] 社会化分享\n- [ ] 第三方登陆\n- [ ] 打包发布-市面上很多了，发布计划搁置\n\n\n## API接口文档\n\n## 系统截图\n\n## 项目布局\n\n```\n.\n├── App.js                          RN默认首页\n├── __tests__   \n│   └── App-test.js                 RN默认测试用例\n├── android                         android目录\n│   ├── app\n├── app.json                        APP名称配置\n├── babel.config.js                 babel     \n├── img                             img\n│   ├── 01.png\n│   ├── 02.png\n│   ├── 03.png\n│   ├── 04.png\n│   ├── 05.png\n│   ├── 06.png\n│   ├── 07.png\n│   └── aw.jpg\n├── index.js                            APP主配置入口\n├── ios                                 ios目录\n├── js                                  工程目录\n│   ├── ReactComponent                  React组件demo\n│   │   ├── App.js\n│   │   ├── AsyncStorageDemoPage.js\n│   │   ├── DataStoreDemoPage.js\n│   │   ├── FlatListDemo.js\n│   │   ├── ModalDemo.js\n│   │   ├── SectionListDemo.js\n│   │   └── SwipeableFlatListDemo.js\n│   ├── Reducer                         项目Reducer\n│   │   ├── favorite\n│   │   │   └── index.js\n│   │   ├── index.js\n│   │   ├── language\n│   │   │   └── index.js\n│   │   ├── popular\n│   │   │   └── index.js\n│   │   ├── theme\n│   │   │   └── index.js\n│   │   └── trending\n│   │       └── index.js\n│   ├── action                          项目action\n│   │   ├── ActionUtil.js\n│   │   ├── favorite\n│   │   │   └── index.js\n│   │   ├── index.js\n│   │   ├── language\n│   │   │   └── index.js\n│   │   ├── popular\n│   │   │   └── index.js\n│   │   ├── theme\n│   │   │   └── index.js\n│   │   ├── trending\n│   │   │   └── index.js\n│   │   └── types.js\n│   ├── common                          项目公共组件\n│   │   ├── BackPressComponent.js\n│   │   ├── BaseItem.js\n│   │   ├── MORE_MENU.js\n│   │   ├── NavigationBar.js\n│   │   ├── PopularItem.js\n│   │   ├── SafeAreaViewPlus.js\n│   │   ├── TrendingDialog.js\n│   │   └── TrendingItem.js\n│   ├── expand                          项目数据操作框架\n│   │   └── dao\n│   │       ├── DataStore.js\n│   │       ├── FavoriteDao.js\n│   │       ├── LanguageDao.js\n│   │       ├── ThemeDao.js\n│   │       └── read.md\n│   ├── model                           项目Model\n│   │   ├── ProjectModel.js\n│   │   └── TimeSpan.js\n│   ├── navigator                       ReactNative Navigator demo\n│   │   ├── AppNavigator.js\n│   │   ├── DynamicTabNavigator.js\n│   │   ├── NavigationUtil.js\n│   │   ├── ReactComponentNavigator.js\n│   │   ├── ReduxNavigator              项目Navigator配置\n│   │   │   ├── AppNavigator.js\n│   │   │   └── DynamicTabNavigator.js\n│   │   └── StackSwitchNavigators.js\n│   ├── page                            ReactNative Page demo\n│   │   ├── AboutPage.js\n│   │   ├── DetailPage.js\n│   │   ├── FavoritePage.js\n│   │   ├── FetchDemo.js\n│   │   ├── HomePage.js\n│   │   ├── MyPage.js\n│   │   ├── PopularPage.js\n│   │   ├── TrendingPage.js\n│   │   ├── WelcomePage.js\n│   │   └── read.md\n│   ├── pageRedux                       项目配置了Redux的page目录\n│   │   ├── App.js\n│   │   ├── CustomTheme.js              \n│   │   ├── DetailPage.js               详情\n│   │   ├── FavoritePage.js             收藏\n│   │   ├── HomePage.js                 主页\n│   │   ├── MyPage.js                   我的\n│   │   ├── PopularPage.js              最新\n│   │   ├── TrendingPage.js             趋势\n│   │   ├── WebViewPage.js              webview展示\n│   │   ├── WelcomePage.js              欢迎页面\n│   │   └── about                       关于页面\n│   │       ├── AboutCommon.js\n│   │       ├── AboutMePage.js\n│   │       └── AboutPage.js\n│   ├── res\n│   │   ├── data                        多语言，分享，技术名称json\n│   │   │   ├── config.json\n│   │   │   ├── keys.json\n│   │   │   ├── langs.json\n│   │   │   └── share.json\n│   │   └── styles                      项目公共style\n│   │       ├── GlobalStyles.js\n│   │       └── ThemeFactory.js\n│   ├── store                           项目store\n│   │   └── index.js\n│   ├── test                            flowtest\n│   │   └── flowtest.js\n│   └── util                            项目公共工具\n│       ├── ArrayUtil.js\n│       ├── EventTypes.js\n│       ├── FavoriteUtil.js\n│       ├── ShareUtil.js\n│       ├── Utils.js\n│       └── ViewUtil.js\n├── metro.config.js\n├── package-lock.json\n├── package.json\n├── readme.md\n└── yarn.lock   \n.\n\n```\n\n# 感受\n\n从学习ReactNative到开发完成这个项目，历时将近20多天，来谈谈感受\n\n* 跨平台：目前React Native官方已经支持iOS、Android两个平台的移动设备，民间也有一些大牛在做macOS、tvOS，甚至UWP平台的适配。但由于不同平台特性不同，并不能一份代码在所有平台上直接运行，React Native的思想是「Learn once, write anywhere」，需要针对不同平台的特性写出不同的代码，尽量保持组件的高可复用性。\n\n* 性能：官方宣称性能堪比Native，实际使用中会发现几个问题，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存泄露。这就会导致在部分低端Android机型上的性能过差，复杂的、大型的应用会有明显性能问题。\n\n* 热更新：由于App Store应用商店发版迭代效率问题，热更新成为了iOS平台非常渴求的功能，可喜的是React Native的热更新能力非常好，通过将JavaScript代码部署到服务器中，运行过程中即可重新reload整个界面。\n\n* 学习成本：对于iOS开发者来讲，要了解相当数量的Web前端开发知识才可以进行开发，对于Web前端开发者来讲，对于原生性能调优则需要原生开发知识和经验，所以说学习成本略高。\n\n* 开发效率：Android和iOS平台可复用很多组件，仅部分代码需要各自平台分别维护，所以比开发两个平台原生应用效率要高得多。加上本身可动态渲染的能力，不用重新编译，Command⌘+R即可重新渲染界面，开发效率更是惊人地快。\n\n\n# 对比Flutter \n\n\n1. 技术架构上\n    \nReact-Native、Weex 核心是通过 Javascript 开发，执行时需要 Javascript 解释器，UI 是通过原生控件渲染。\nFlutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 \nFlutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）构建。\n\n2. 性能上 \n\nRN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多，但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加\nFlutter 使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹\n  \n3. 高频数据交换下\n\nReactNative在满帧的情况下实际是卡住的，不能切换路由，后端服务关闭后仍然会执行一段时间，证明有事件堆积。\n而Flutter不会影响路由切换，因为Flutter的路由切换在ui主线程上，而react-navigation跑在js线程上。Flutter虽不满帧但可以实时更新数据。\n在某些高性能场景下仍需要跨平台，Flutter是你唯一的选择！\n\n4. UI 一致性\n\nFlutter 因为是自己做的渲染，因此在iOS和Android的效果基本完全一致。\nReactNative存在将RN控件转换为对应平台原生控件的过程，存在一定的差异\n\n5. App体积  \n\nFlutter较大\n\n\n# 项目中遇到的问题，\n\n* 环境配置问题 [url]\n* redux languages action await异步回调数据，即便页面TrendingPage  onLoadLanguage(FLAG_LANGUAGE.flag_language); 派发action之后，仍然拿不到数据，只有等到组件渲染完成才拿到。。\n  \n  通过观察,await异步申请的本地AsyncStorage数据，会存在请求不到的情况， 解决，判断keys\n  ![avatar](./img/aw.jpg)\n  \n  \n  ``` javascript\n  //action \n  import Types from '../types'\n  \n  import LanguageDao from \"../../expand/dao/LanguageDao\"\n  \n  export function onLoadLanguage(flagKey) {\n      return async dispatch=\u003e{\n          try {\n              let languages = await new LanguageDao(flagKey).fetch();\n              dispatch({\n                  type:Types.LANGUAGE_LOAD_SUCCESS,\n                  languages:languages,\n                  flag:flagKey\n              })\n          }catch (e) {\n              console.log(e)\n          }\n      }\n  }\n  \n  //TrendingPage\n  class TrendingPage extends Component\u003cProps\u003e {\n    \n     render(){\n        const TabNavigator = keys.length?createAppContainer(createMaterialTopTabNavigator(\n            this._genTabs(), {\n                //设置tab样式。..\n            }\n        )):null;\n      }\n     \n  }\n  const mapTrendingStateToProps = function(state){\n      return {\n          keys: state.language.languages,\n          theme: state.theme.theme,\n      };\n  }\n  ```\n* 使用NavigationUtil页面无法进入DetailPage \n ``` javascript\n    //TrendingPage.js \n    import NavigationUtil from '../navigator/NavigationUtil'\n    //......\n   \n    renderItem(data){\n        const item = data.item;\n        const {theme} = this.props;\n        const {navigation} = this.props;\n        NavigationUtil.navigation = this.props.navigation; \n          //此处NavigationUtil再次被覆盖，NavigationUtil类的 navigation对象出现异常。\n          //正确使用方法在HomePage入口处一次配置，全部生效\n        return \u003cTrendingItem\n            projectModel={item}\n            theme={theme}\n            onSelect={(callback)=\u003e{\n                console.log('cccc');\n                NavigationUtil.goPage({\n                    theme,\n                    projectMode:item,\n                    flag:FLAG_STORAGE.flag_trending,\n                    callback,\n                },'DetailPage')\n\n            }}\n            onFavorite={(item, isFavorite) =\u003e FavoriteUtil.onFavorite(favoriteDao, item, isFavorite, FLAG_STORAGE.flag_trending)}\n            /\u003e\n    }\n   ```\n\n\n## License\n\n\n\n[GPL](https://raw.githubusercontent.com/tedQB/trading-evil-collect/master/COPYING)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedqb%2Frn_project_txt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftedqb%2Frn_project_txt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedqb%2Frn_project_txt/lists"}