目標
1、實現APP與WEB端安全帽功能通過攝像頭的實時通信，再web端可以查看手機攝像頭獲取的圖像，手機上也可實時顯示畫面；
2、連接、下線
3、切換分辨率、前後攝像頭
使用的相關工具（沒有一個不踩坑！）
1、react-native-webrtc
2、mobx
3、react-navigation-stack
4、native-base
5、babel
6、eslint
7、orion項目裏NB的Header和Popver的Menu和Button
從安裝開始的採坑之類即將開始
1、webrtc文檔
https://github.com/react-native-webrtc/react-native-webrtc#creator
此乃腳趾甲踏入app大門之後除了教程看的第一個工具文檔，爲啥說這麼多廢話呢？因爲看不懂啊！不知道咋看啊！您可能會說看就會了，幹就完了！把腦細胞當腦花吃了的我直接跳過了這麼大字的安裝，迫不及待的想去踩坑了，待經過大師的指點之後，還是應該不能放過每一個步驟的坑，要從安裝開始挖！
1.1 安裝時版本問題
經親身體驗，前面的一切都沒得問題，直到。。這裏！
自己的版本不要改，其他照常配置即可，註釋掉的部分爲打包時的坑，請看後續
1.2 yarn與import
在按照文檔install之前就先通過yarn添加了這個包，後續導致紅屏提示什麼巴拉巴拉重複，按照提示即可解決——切記手賤！
2、安卓模擬器
使用的爲該版本的模擬器，截止於2019年11月28日爲最新版本，可就是坑在它太新了！
2.1 不能通過正常搖一搖打開dev settings
沒得搖一搖，又因爲存在一些熱鍵衝突，只能通過cmd命令行輸入adb shell input keyevent 82打開。。真是充滿了人工智障的味道，最原始的方法有奇效。
2.2 打包時http與android9.0的問題
安卓9.0 Cleartext HTTP traffic to XXX not permitted
原因：
爲保證用戶數據和設備的安全，Google針對下一代 Android 系統(Android P) 的應用程序，將要求默認使用加密連接，這意味着 Android P 將禁止 App 使用所有未加密的連接，因此運行 Android P 系統的安卓設備無論是接收或者發送流量，未來都不能明碼傳輸，需要使用下一代(Transport Layer Security)傳輸層安全協議，而 Android Nougat 和 Oreo 則不受影響。
解決方法：targetSdkVersion 降到27或以下
找到了orion項目的相關配置，又做的“些許”調整，OK =.=
3、程序部分
終於到了最激動人心的程序部分了，真是問題多到頭大，讓我想想該從哪裏說起。。
3.1 navigation路由跳轉
這個東西明明不是什麼很難的東西，我最開始只是簡簡單單的想做兩個界面，點擊第一個初始界面之後可以跳轉到第二個顯示界面，就是簡簡單單的兩個界面啊喂！面子都不給我的嘛！——不給~
在網上看了很多教程，都是使用react-navigation，但由於“版本問題”，我只得使用**‘react-navigation-stack’**
充滿了艱難看起來又很智障的不到30行代碼，至於爲什麼不能用react-navigation的大多數的寫法，哪種纔是最新最好的，該如何在很多很多頁面盡情跳來跳去反覆閃現，這個接下來再通過代碼繼續研究吧。
3.2 生命週期
這個是自己的問題，當把一隻小白放在一個知識盲區中，坑就形成了~
項目的代碼有看過，知道這些東西就是在某些時刻進行調用，到自己用起來的時候可就充滿樂趣了。
在不知道怎麼調用想用的函數時，寫在這裏就對了！雖然最後都用寫在render裏解決了，但之後還是應該整理下哪些東西要寫在哪裏比較好。
3.3 state與mobx中的observer
兩者基本可以相互代替，都是值改變後會重新渲染，使用mobx時在類前要@observer，在變量前要@observable，寫反了會報錯（未定義變量錯誤，不要問我咋知道的），改變state.***的值的時候需要使用setState()，綜上還是用mobx方便！
3.4 native-base
https://github.com/GeekyAnts/NativeBase 文檔
https://docs.nativebase.io/Components.html#stacked-label-headref 使用教程
react-native-vector-icons 圖標
這個也是需要修改配置的似乎，可能是回憶太痛苦我已經開始選擇性遺忘了，大腦真是個會體諒人的小妖精。
使用了import {Button, Icon, Text, Picker} from 'native-base’這幾個，體驗感不佳，很多問題當真就是“版本問題”，一毛一樣的東西爲啥他行我不行（我不行？？）
Fab那個東西還是蠻好用的，位置不用手動去定義（要被各個小東西的位置折磨瘋了），直接一行代碼寫在右下角就很完美，雖然最後我沒有用，功能不多就用帶圖標的按鈕代替了。
還有個選擇器那個東西真是個坑，永遠只能讀到改變時的前一個狀態，蜜汁尷尬，反應慢了一拍真是毫無辦法，以後只能避免用它了，用個提示彈窗不香嘛？
3.5 彈性佈局
這個東西是好東西！明白原理就很愉悅，不明白大腦就在顫抖，我現在的狀態是有時候愉悅有時候顫抖，看了很多教程，感覺有點懵，最後在大師的指點下醍醐灌頂到50%，真是太艱難了。。。
除了阮一峯的博文，我最後看的是這一篇：https://www.cnblogs.com/qcloud1001/p/9848619.html 感覺理解上容易多了。
一個View包裹的就是一個小東西，就是在一個矩形裏不斷畫矩形的過程，每個矩形可以就是一個包好的View，然後就開始組合吧，flex：1也是個好東西，用對了體驗感極佳，用錯了也是會帶來很多驚喜呢。
3.6 調用函數
this.login後不可加()
該函數是這樣定義的，所以調用函數直接是login，若使用login()則會返回調用該函數後的值
如果函數中有this要寫成箭頭函數
3.7 從其他庫導入包
npm i yrm -g 安裝yrm插件
yrm add bigger https://npm.biggersoft.com/ bigger地址庫
yrm ls 查看存在的庫
yrm use bigger 切換庫
3.8 babel和eslint配置
這兩個經大師指導應該是第一步的，但經過了我不下4次新建項目導入各種包之後就放棄了配置，果然又踩進了坑。
按照已有的去配置就完了不要自己瞎折騰
eslint可以使用eslint --init 去試一下
代碼上踩的坑似乎到這裏就沒什麼再寫的了，當然還有很多像多了個括號少了個括號，忘記引入導出……（此處感謝各位大佬承受住了我寫的代碼的精神折磨！）在用git時也經歷了一些曲折，可能當年去哈爾濱玩的時候多看了幾眼俄羅斯套娃從此就對套娃充滿了偏愛。還是先建立一個倉庫再往裏面寫東西似乎比較穩妥。
4、webrtc與participant
4.1 webrtc 實時通信
WebRTC實現了三個API，分別是:
- MediaStream：通過MediaStream的API能夠通過設備的攝像頭及話筒獲得視頻、音頻的同步流
- RTCPeerConnection：RTCPeerConnection是WebRTC用於構建點對點之間穩定、高效的流傳輸的組件
- RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用於傳輸任意數據
拿到本機的數據流用於回傳：streamURL={this.outgoingMedia.localStream.toURL()
4.2 participant
再這裏設置了ice地址、數據流狀態、相關權限、傳輸方式等，反正就是基本拿過來用的=.=
5、apk打包
打包的時候不要用AndroidStudio，根據官方文檔，https://reactnative.cn/docs/signed-apk-android/ 憋自己瞎折騰了
如果出錯先根據提示找代碼裏的錯誤，上面提到一個版本問題，反正就根據跑得起來的改就對了。解決版本問題之後可能還會報錯，這時候就該用到最有用的重啓大法，重啓編譯器，一遍不行多試幾次，不要在終端裏輸入命令，在cmd或者shell裏換着來，這時候如果代碼裏確實沒錯誤了，應該就打包的通了，如果還還還有問題。。那就該用到終極奧義了——重啓電腦！！！都會解決的，阿門~
apk打包完畢，在真機上運行需要下載安裝浪費時間，但真機上確實可能看到很多模擬器上看不到的問題，此時可以調出終端，用打包生成好的安裝好進行安裝，能在一定程度上節省時間閱覽效果。
好了，這次app初體驗之採坑之旅就寫到這裏，過程充滿了曲折和愉悅（？？？）~由衷感謝幫助我在shit一樣的代碼中找問題的小夥伴們，好人一生平安！下次一定會找的更熟練的！感恩的💗