{"id":16492841,"url":"https://github.com/hubcarl/smart-react-native-app","last_synced_at":"2025-03-21T07:31:48.292Z","repository":{"id":45514159,"uuid":"63477185","full_name":"hubcarl/smart-react-native-app","owner":"hubcarl","description":"React Native 下拉刷新, 分页加载, 侧边栏, Tab导航学习(Android Studio, ES6语法)","archived":false,"fork":false,"pushed_at":"2017-03-19T09:19:42.000Z","size":23051,"stargazers_count":58,"open_issues_count":2,"forks_count":20,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-17T22:42:45.185Z","etag":null,"topics":["drawerlayout","dynamic-update","pull-load-more","pull-to-refresh","react","react-native"],"latest_commit_sha":null,"homepage":"http://hubcarl.github.io","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/hubcarl.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":"2016-07-16T10:07:49.000Z","updated_at":"2025-01-17T08:05:58.000Z","dependencies_parsed_at":"2022-09-01T22:10:46.260Z","dependency_job_id":null,"html_url":"https://github.com/hubcarl/smart-react-native-app","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fsmart-react-native-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fsmart-react-native-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fsmart-react-native-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fsmart-react-native-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hubcarl","download_url":"https://codeload.github.com/hubcarl/smart-react-native-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244758048,"owners_count":20505567,"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":["drawerlayout","dynamic-update","pull-load-more","pull-to-refresh","react","react-native"],"created_at":"2024-10-11T14:07:25.531Z","updated_at":"2025-03-21T07:31:45.353Z","avatar_url":"https://github.com/hubcarl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Native 学习研究\r\n\r\n\r\n### 1.运行android\r\n\r\nnpm run android \r\n或者\r\nreact-native run-android\r\n\r\n\r\n### 2.运行ios\r\n\r\nnpm run ios\r\n或者\r\nreact-native run-ios\r\n\r\n\r\n### 3.功能实现\r\n\r\n\r\n#### Tab实现\r\n\r\n- [固定Tab](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/tabs/SimpleExample.js)\r\n\r\n- [可滚动Tab](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/tabs/ScrollableTabsExample.js)\r\n\r\n#### 抽屉侧边栏\r\n\r\n[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/test/drawMD.android.js)\r\n\r\n#### 下拉刷新\r\n\r\n[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/common/ListViewRefresh.js)\r\n\r\n#### 分页加载\r\n\r\n[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/common/ListViewPullRefresh.js)\r\n\r\n#### 动态更新\r\n\r\n[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/android/app/src/main/java/com/react/smart/UpdateReactActivity.java)\r\n\r\n[React Native Android热更新实现](http://hubcarl.github.io/blog/2016/09/15/react-native-update/)\r\n\r\n\r\n[查看截图](https://github.com/hubcarl/smart-react-native-app/blob/master/screenshot.md)\r\n\r\n\r\n### 4.adb文件下载和上传\r\n\r\n**adb pull  就是从真机上拷贝文件到您的PC**\r\n\r\n```bash\r\nadb pull /sdcard/react-native-update.mp4   /Users/sky/dev/react/native/SmartReactNativeApp/images\r\n```\r\n**adb push  就是从PC上复制一份文件到您的真机上**\r\n\r\n```bash\r\nadb push /Users/sky/dev/react/native/SmartReactNativeApp/images/home.png  /sdcard\r\n```\r\n\r\n### 5.真机调试\r\n\r\n- bundle服务连不上,命令行执行以下命令\r\n\r\n```bash\r\nadb reverse tcp:8081 tcp:8081\r\n```\r\n\r\n- 8081端口占用:\r\n\r\n```bash\r\nlsof -n -i4TCP:8081\r\nkill -9 pid\r\n```\r\n\r\n\r\n### 6.签名密钥\r\n\r\n```bash\r\nkeytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000\r\n```\r\n\r\n### 7.jsbundle生成到asset目录\r\n\r\n```bash\r\nreact-native bundle --entry-file ./index.android.js  --bundle-output ./app/src/main/assets/index.android.bundle --platform android --assets-dest ./app/src/main/res/ --dev false\r\n```\r\n\r\n```bash\r\ncurl \"http://localhost:8081/debug.android.bundle?platform=android\" -o  \"./app/src/main/assets/debug.android.bundle\"\r\n```\r\n\r\n\r\n#### 8.adb 截屏和视频录播\r\n\r\n```bash\r\nadb shell screenrecord /sdcard/react-native-update.mp4\r\n```\r\nhttp://note.rpsh.net/posts/2015/04/21/mac-osx-ffmpeg-mp4-gif-convert/\r\n\r\n```bash\r\nffmpeg -i  /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.mp4 /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.gif\r\n```\r\n\r\n从视频中第9秒开始，截取时长为8秒的片段转化为 gif\r\n\r\n```bash\r\nffmpeg -t 8  -ss 00:00:09 -i /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.mp4 /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.gif\r\n```\r\n\r\n### 9.Android 系列学习总结\r\n\r\n1. [React Native, Hybrid App, H5 简单对比分析](http://hubcarl.github.io/blog/2016/08/07/react-native-compare/)\r\n\r\n2. [React Native Android 自定义插件](http://hubcarl.github.io/blog/2016/08/13/react-native-plugin)\r\n\r\n3. [React Native Android APK包大小分析](http://hubcarl.github.io/blog/2016/08/21/react-native-size/)\r\n\r\n4. [React Native Android源码解读和交互原理分析](http://hubcarl.github.io/blog/2016/08/28/react-native-js/)\r\n\r\n5. [React Native Android代码执行跟踪和调试](http://hubcarl.github.io/blog/2016/09/04/react-native-debug/)\r\n\r\n6. [React Native Android热更新实现](http://hubcarl.github.io/blog/2016/09/15/react-native-update/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubcarl%2Fsmart-react-native-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhubcarl%2Fsmart-react-native-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubcarl%2Fsmart-react-native-app/lists"}