The smart-react-native-app from hubcarl

hubcarl / smart-react-native-app Goto Github PK

View Code? Open in Web Editor NEW

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

Java 1.02% JavaScript 98.76% HTML 0.09% Objective-C 0.13%

smart-react-native-app's Introduction

React Native 学习研究

1.运行android

npm run android 或者 react-native run-android

2.运行ios

npm run ios 或者 react-native run-ios

3.功能实现

Tab实现

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