GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hubcarl → smart-react-native-app

hubcarl / smart-react-native-app

Licence: other
React Native 下拉刷新, 分页加载, 侧边栏, Tab导航学习(Android Studio, ES6语法)

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactreact-nativepull-to-refreshdrawerlayoutdynamic-updatepull-load-more

Projects that are alternatives of or similar to smart-react-native-app

Liquidrefreshlayout
Liquid Refresh Layout is a simple SwipeToRefresh library that helps you easily integrate SwipeToRefresh and performs simple clean liquid animation
Stars: ✭ 114 (+103.57%)
Mutual labels:  pull-to-refresh
Xrefreshview
一个万能的android下拉上拉刷新的框架,完美支持recyclerview
Stars: ✭ 1,685 (+2908.93%)
Mutual labels:  pull-to-refresh
Tabanimated
A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)
Stars: ✭ 2,909 (+5094.64%)
Mutual labels:  pull-to-refresh
Minirefresh
优雅的H5 下拉刷新。零依赖，高性能，多主题，易拓展。(A Graceful HTML5 Drop-Down-Refresh Plugin. )
Stars: ✭ 1,525 (+2623.21%)
Mutual labels:  pull-to-refresh
Periscopypulltorefresh
Pull-To-Refresh view inspired by Periscope application written in swift
Stars: ✭ 134 (+139.29%)
Mutual labels:  pull-to-refresh
Springview
🔥 A custom view pull to refresh,support ScrollView,ListView,RecyclerView,WebView and all another views, easy to use
Stars: ✭ 1,936 (+3357.14%)
Mutual labels:  pull-to-refresh
React Native Rk Pull To Refresh
a pull to refresh component for react-native, same api on both android and ios
Stars: ✭ 100 (+78.57%)
Mutual labels:  pull-to-refresh
XCPullToLoadMoreListView
XCPullToLoadMoreListView-下拉加载更多ListView控件（仿QQ、微信聊天对话列表控件）
Stars: ✭ 24 (-57.14%)
Mutual labels:  pull-to-refresh
Taurus
A little more fun for the pull-to-refresh interaction.
Stars: ✭ 1,674 (+2889.29%)
Mutual labels:  pull-to-refresh
Pull To Refresh.rentals Ios
This project aims to provide a simple and customizable pull to refresh implementation. Made in Yalantis
Stars: ✭ 2,171 (+3776.79%)
Mutual labels:  pull-to-refresh
Mrefresh
This pod enables you to add pull-to-refresh mechanism to your scrollviews and tableviews and use svg patterns in your refreshing view's layers.
Stars: ✭ 123 (+119.64%)
Mutual labels:  pull-to-refresh
Vue Pull To Refresh
vue.js,refresh,load more,Vue2.0 上下拉刷新
Stars: ✭ 129 (+130.36%)
Mutual labels:  pull-to-refresh
React Native Pull To Refresh
The Pull-To-Refresh component for React Native (iOS/Android)
Stars: ✭ 166 (+196.43%)
Mutual labels:  pull-to-refresh
Pull To Refresh
ESPullToRefresh is developed and maintained by Vincent Li. If you have any questions or issues in using ESPullToRefresh, welcome to issue. If you want to contribute to ESPullToRefresh, Please submit Pull Request, I will deal with it as soon as possible.
Stars: ✭ 1,591 (+2741.07%)
Mutual labels:  pull-to-refresh
UCPullRefresh
This is a beautiful drop-down refresh as well as the effect of back to the home page lick UCBrowser
Stars: ✭ 44 (-21.43%)
Mutual labels:  pull-to-refresh
Pull To Make Soup
Custom animated pull-to-refresh that can be easily added to RecyclerView
Stars: ✭ 1,443 (+2476.79%)
Mutual labels:  pull-to-refresh
Vue Scroller
Scroller Component for Vue.js
Stars: ✭ 1,775 (+3069.64%)
Mutual labels:  pull-to-refresh
tulip-scroll
📜 多场景的下拉组件和更多，https://artiely.gitee.io/scroll-docs/
Stars: ✭ 44 (-21.43%)
Mutual labels:  pull-to-refresh
react-native-smooth-pull-to-refresh
Custom pull to refresh component for React Native
Stars: ✭ 36 (-35.71%)
Mutual labels:  pull-to-refresh
Pull Element
Lightweight, high-performance and smooth pull element effect that support all directions
Stars: ✭ 171 (+205.36%)
Mutual labels:  pull-to-refresh
View All Similar Projects ➔

React Native 学习研究

1.运行android

npm run android 或者 react-native run-android

2.运行ios

npm run ios 或者 react-native run-ios

3.功能实现

Tab实现

抽屉侧边栏

View Code

下拉刷新

View Code

分页加载

View Code

动态更新

View Code

React Native Android热更新实现

查看截图

4.adb文件下载和上传

adb pull 就是从真机上拷贝文件到您的PC

adb pull /sdcard/react-native-update.mp4   /Users/sky/dev/react/native/SmartReactNativeApp/images

adb push 就是从PC上复制一份文件到您的真机上

adb push /Users/sky/dev/react/native/SmartReactNativeApp/images/home.png  /sdcard

5.真机调试

  • bundle服务连不上,命令行执行以下命令
adb reverse tcp:8081 tcp:8081
  • 8081端口占用:
lsof -n -i4TCP:8081
kill -9 pid

6.签名密钥

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

7.jsbundle生成到asset目录

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
curl "http://localhost:8081/debug.android.bundle?platform=android" -o  "./app/src/main/assets/debug.android.bundle"

8.adb 截屏和视频录播

adb shell screenrecord /sdcard/react-native-update.mp4

http://note.rpsh.net/posts/2015/04/21/mac-osx-ffmpeg-mp4-gif-convert/

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

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 简单对比分析

  2. React Native Android 自定义插件

  3. React Native Android APK包大小分析

  4. React Native Android源码解读和交互原理分析

  5. React Native Android代码执行跟踪和调试

  6. React Native Android热更新实现

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].