react-native開發教程

搭建環境

1. 下載android studio https://developer.android.google.cn/studio/index.html

2. VSCode 搭建 React Native 環境

   https://www.cnblogs.com/hl1223/p/11049968.html
   https://blog.csdn.net/young_emily/article/details/79005728

3、連接夜神

adb connect 127.0.0.1:62001

4、查看abd狀態

 adb devices

從設備連接開發服務器

adb reverse tcp:8081 tcp:8081

打印網絡請求

adb logcat -v threadtime |grep HTTP

打包apk

https://ithelp.ithome.com.tw/articles/10188858

1. 生成簽名

keytool -genkeypair -v -keystore tt-release-key.keystore -alias tt-key-alias -keyalg RSA -keysize 2048 -validity 10000

2. 配置

3. 安裝

日誌

react-native log-android
adb logcat -v threadtime |grep HTTP
adb logcat *:I ReactNative:V ReactNativeJS:V
adb logcat *:S ReactNative:V ReactNativeJS:V
adb logcat -b main -b system -b radio -b events -v time > e://all.log
react-native log-android
adb shell ifconfig wlan0
adb tcpip 5555 
adb connect 192.168.1.199 

查看打印的log

adb logcat *:I ReactNative:V ReactNativeJS:V

android device monitor 協助輸出 log 日誌信息

Android SDK 自帶的 ADM 調試工具

> monitor

adb命令安裝apk到手機

adb install E:\work\a\tangApp\android\app\build\outputs\apk\app-release.apk

mac啓動虛擬機

cd ~/Library/Android/sdk/emulator/

//查看模擬設備列表
./emulator -list-avds

//啓動某個模擬設備
./emulator @Nexus_5X_API_28

連接真機

1、打包debug版本

./gradlew assembleDebug

2、從設備上訪問開發服務器

adb reverse tcp:8081 tcp:8081

3、安裝apk到手機

adb install E:\work\a\tangApp\android\app\build\outputs\apk\app-release.apk

手機和電腦傳輸數據

http://www.kuparty.com/g/39554

安卓技巧

1. adb常用命令

   • https://www.jianshu.com/p/5b21377cf69b
   • https://my.oschina.net/laomanong008/blog/908695

2. 清除緩存

gradlew clean

抓包

http://www.lemfix.com/topics/43397 App 抓包提示網絡異常怎麼破？
https://www.52pojie.cn/thread-967606-1-1.html 抓不到包？

學習資料

• 官方中文文檔 https://reactnative.cn/docs/getting-started.html
• https://github.com/reactnativecn/react-native-guide
• https://github.com/crazycodeboy/react-native-awesome
• react中文網
• 組件：Image網絡圖片

組件

• 圖片Image

1. https://www.hangge.com/blog/cache/detail_1542.html

手動安裝安卓依賴

https://blog.csdn.net/Cui_xing_tian/article/details/93503835

資源網站

• https://js.coach/?collection=React+Native&category=Images
• https://react.parts/
• https://www.jianshu.com/p/d9cd9a868764 組件庫

常見錯誤

1、webview白屏？

https://blog.csdn.net/u011124212/article/details/82118073

android Webview加載url空白，但瀏覽器能打開

webSettings.setDomStorageEnabled(true);//主要是這句
webSettings.setJavaScriptEnabled(true);//啓用js
webSettings.setBlockNetworkImage(false);//解決圖片不顯示