https://github.com/hubcarl/smart-react-native-app
React Native 下拉刷新, 分页加载, 侧边栏, Tab导航学习(Android Studio, ES6语法)
https://github.com/hubcarl/smart-react-native-app
drawerlayout dynamic-update pull-load-more pull-to-refresh react react-native
Last synced: about 1 year ago
JSON representation
React Native 下拉刷新, 分页加载, 侧边栏, Tab导航学习(Android Studio, ES6语法)
- Host: GitHub
- URL: https://github.com/hubcarl/smart-react-native-app
- Owner: hubcarl
- Created: 2016-07-16T10:07:49.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-03-19T09:19:42.000Z (about 9 years ago)
- Last Synced: 2025-03-17T22:42:45.185Z (about 1 year ago)
- Topics: drawerlayout, dynamic-update, pull-load-more, pull-to-refresh, react, react-native
- Language: JavaScript
- Homepage: http://hubcarl.github.io
- Size: 22 MB
- Stars: 58
- Watchers: 6
- Forks: 20
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Native 学习研究
### 1.运行android
npm run android
或者
react-native run-android
### 2.运行ios
npm run ios
或者
react-native run-ios
### 3.功能实现
#### Tab实现
- [固定Tab](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/tabs/SimpleExample.js)
- [可滚动Tab](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/tabs/ScrollableTabsExample.js)
#### 抽屉侧边栏
[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/test/drawMD.android.js)
#### 下拉刷新
[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/common/ListViewRefresh.js)
#### 分页加载
[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/app/pages/common/ListViewPullRefresh.js)
#### 动态更新
[View Code](https://github.com/hubcarl/smart-react-native-app/blob/master/android/app/src/main/java/com/react/smart/UpdateReactActivity.java)
[React Native Android热更新实现](http://hubcarl.github.io/blog/2016/09/15/react-native-update/)
[查看截图](https://github.com/hubcarl/smart-react-native-app/blob/master/screenshot.md)
### 4.adb文件下载和上传
**adb pull 就是从真机上拷贝文件到您的PC**
```bash
adb pull /sdcard/react-native-update.mp4 /Users/sky/dev/react/native/SmartReactNativeApp/images
```
**adb push 就是从PC上复制一份文件到您的真机上**
```bash
adb push /Users/sky/dev/react/native/SmartReactNativeApp/images/home.png /sdcard
```
### 5.真机调试
- bundle服务连不上,命令行执行以下命令
```bash
adb reverse tcp:8081 tcp:8081
```
- 8081端口占用:
```bash
lsof -n -i4TCP:8081
kill -9 pid
```
### 6.签名密钥
```bash
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
```
### 7.jsbundle生成到asset目录
```bash
react-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
```
```bash
curl "http://localhost:8081/debug.android.bundle?platform=android" -o "./app/src/main/assets/debug.android.bundle"
```
#### 8.adb 截屏和视频录播
```bash
adb shell screenrecord /sdcard/react-native-update.mp4
```
http://note.rpsh.net/posts/2015/04/21/mac-osx-ffmpeg-mp4-gif-convert/
```bash
ffmpeg -i /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.mp4 /Users/sky/dev/react/native/SmartReactNativeApp/images/react-native-update.gif
```
从视频中第9秒开始，截取时长为8秒的片段转化为 gif
```bash
ffmpeg -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
```
### 9.Android 系列学习总结
1. [React Native, Hybrid App, H5 简单对比分析](http://hubcarl.github.io/blog/2016/08/07/react-native-compare/)
2. [React Native Android 自定义插件](http://hubcarl.github.io/blog/2016/08/13/react-native-plugin)
3. [React Native Android APK包大小分析](http://hubcarl.github.io/blog/2016/08/21/react-native-size/)
4. [React Native Android源码解读和交互原理分析](http://hubcarl.github.io/blog/2016/08/28/react-native-js/)
5. [React Native Android代码执行跟踪和调试](http://hubcarl.github.io/blog/2016/09/04/react-native-debug/)
6. [React Native Android热更新实现](http://hubcarl.github.io/blog/2016/09/15/react-native-update/)