一:出現(xiàn):
unknown platform:react-native
ReferenceError:printExample is not defined
錯誤檬寂,
則:
npm install / yarn install;
npm start;
二:出現(xiàn)the development server... code:500的錯誤
1. Try run npm start and react-native run android. Maybe your Metro Bundler isn't started.(暫時未解決)
2. 就是代碼出錯
三:React Native 依賴踩坑實錄——UnableToResolveError: Unable to resolve module `AccessibilityInfo
0 準備: 關閉所有dev過程的console 窗口和IDE,Emulator也關了吧
1 刪除你的依賴文件夾 node_modules
2 清除npm緩存 $ npm cache clean --force
3 重新安裝npm依賴 $ npm install
4 Clean RN 環(huán)境并重啟試試 $ npm start -- --reset-cache
(yarn start -- --reset-cache),啟動時,npm效果好
ps: 或者npm報錯:npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-03-15T01_48_14_769Z-debug.log
1. npm i npm -g(還是報錯,方法不太可行)
四:如果是安卓和iOS配置問題,切記幔嫂,以官方文檔為主
五:查錯不看全路徑,搞的一直崩潰誊薄,在android studio里
六:Android Studio的 Terminal下敲 gradlew? xxxx:dependencies 命令履恩,查看依賴樹,解決重復依賴
七:android中的gradle版本依賴一定要做到統(tǒng)一呢蔫,不然會出現(xiàn)重復依賴切心,不管是module中還是app中,都要這樣做
八:一般出現(xiàn)引用錯誤都是緩存問題片吊,先清除緩存绽昏,在編譯
九:ReactNativeJS: undefined is not a function (near '..._reactNativeNavigation.Navigation.startTabBasedApp...')是因為:這是v1版本,要遷移俏脊,如下例子https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration
十:導入react-native-navigation-hybrid全谤,注意導入時,link爷贫,否則出現(xiàn)null is object錯誤
https://www.npmjs.com/package/react-native-navigation-hybrid/v/0.8.2
link的作用也就是導入module认然,如:
include ':react-native-navigation-hybrid'
project(':react-native-navigation-hybrid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation-hybrid/android')
十一:導入react-native-navigation-hybrid的配置問題
https://www.npmjs.com/package/react-native-navigation-hybrid/v/0.8.2
https://github.com/listenzz/react-native-navigation-hybrid/blob/master/doc/integration-native.md
十二:從0開始的RN項目講解,版本有點老漫萄,但思維還是一樣的
https://juejin.im/post/5a9f93d96fb9a028d2077c19
十三:二維碼導入報"RNSVGRect" was not found in the UIManager錯誤時
react-native link is missing the last step. it is not adding "new SvgPackage()"
Open up `android/app/src/main/java/[...]/MainApplication.java
Add new SvgPackage() to the list returned by the getPackages() method. Add a comma to the previous item if there's already something there.
十四:二維碼生成卷员,掃描(還未實現(xiàn)相冊選擇圖片功能)
http://www.reibang.com/p/dd1474c0a0cf? ? (react-native-qrcode)
http://www.reibang.com/p/bfad4c158f07? ? (react-native-qrcode-svg, react-native-camera)
掃描二維碼界面的生成
https://blog.csdn.net/qq_34619754/article/details/83346602
十五:導入百度地圖后出現(xiàn),錯誤app:transformDexArchiveWithDexMergerForDebug
http://www.reibang.com/p/7192eb0065a0 (百度地圖的插件安裝方法)
https://github.com/lovebing/react-native-baidu-map (git上腾务,百度地圖第三方庫)
這個錯誤的解決:這是個依賴重復的錯誤子刮,實際上后面還有一句話:方法數(shù)劇增,超過64k
解決辦法是:http://www.reibang.com/p/cddfc89ce947窑睁,android:name的名字可以考慮不改挺峡,試試看
實在解決不了"BaiduMapView" was not found in the UIManager.,
可采用另外的百度SDK: https://github.com/qiuxiang/react-native-baidumap-sdk
地圖的詳細用法:https://blog.csdn.net/qq_39910762/article/details/82882786
當百度地圖報錯:BaiduMapView was not found in the UIManager担钮;解決方案是:
protected void init(ReactApplicationContext reactContext) {
? ? ? ? if (Looper.myLooper()==null){
? ? ? ? ? ? Looper.prepare();
? ? ? ? }
? ? ? ? SDKInitializer.initialize(reactContext.getApplicationContext());
? ? }
即:在BaiduMapPackage加上if (Looper.myLooper()==null){
? ? ? ? ? ? Looper.prepare();
? ? ? ? }
其實在每次應用運行的時候橱赠,都會報一次Only one Looper may be created per thread,但是我沒有理會箫津,因而造成如此大的BUG狭姨,引以為戒宰啦。
十六:百度地圖出錯:Authentication Error errorcode: -1 uid: -1 appid -1 msg: Current network is not available.
// 這是給百度api加權限
<uses-permission android:name="android.permission.USE_CREDENTIALS" />
<uses-permission android:name="android.permission.MANAGE_ACCOUNTS" />
<uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
十七:報錯:Could not connect to development server
http://www.reibang.com/p/be012c4b3e66
解決辦法:adb reverse tcp:8081 tcp:8081
十八:百度地圖xml配置詳細解釋
https://zhulichao.github.io/2017/06/17/react-native-baidu-map-android/
十九:實現(xiàn)自定義標記
http://www.reibang.com/p/030d2be37095
Overlay:簡單說明
https://blog.csdn.net/WuLex/article/details/79530450
Overlay:覆蓋物的抽象基類,所有的覆蓋物均繼承此類的方法饼拍。
Marker:標注表示地圖上的點赡模,可自定義標注的圖標。
Label:表示地圖上的文本標注师抄,您可以自定義標注的文本內(nèi)容漓柑。
Polyline:表示地圖上的折線。
Polygon:表示地圖上的多邊形叨吮。多邊形類似于閉合的折線辆布,另外您也可以為其添加填充顏色。
Circle: 表示地圖上的圓茶鉴。
InfoWindow:信息窗口也是一種特殊的覆蓋物锋玲,它可以展示更為豐富的文字和多媒體信息。注意:同一時刻只能有一個信息窗口在地圖上打開
map.addOverlay方法向地圖添加覆蓋物
map.removeOverlay方法移除覆蓋物涵叮,注意此方法不適用于InfoWindow
二十:大頭針實際上是Overlay.Marker標簽惭蹂,然后用其屬性,自定義icon就可以更改其圖片了
二十一:報firebase不能open時割粮,是權限問題盾碗,比如定位權限、文件讀寫權限等
二十二:des加密react-native寫法
https://blog.zhengxianjun.com/2015/05/javascript-crypto-js/
二十四:react-native獲取定位權限
https://blog.csdn.net/mochiwxtianya/article/details/80132861
二十五:瀏覽器控制臺顯示數(shù)組不全時:使用以下方法
console.log(JSON.stringify(數(shù)組或對象));
二十六:獲取地圖位置穆刻、相冊等,需要動態(tài)權限
React Native (六) CameraRoll 相冊組件
https://nealma.com/2016/07/29/react-native-6-cameraroll/
React Native - 使用CameraRoll獲取相冊圖片杠步、并顯示
https://blog.csdn.net/qq_38719039/article/details/79469659
react-native-image-picker圖片氢伟、框架
二十六:fetch上傳圖片時,大小不能超過2M
二十七:for循環(huán)中傳參幽歼,一定要注意for里面的值不能用var朵锣,得用let
二十八:xml資源文件夾的創(chuàng)建方式,不能手動自己create甸私,應該是诚些,new->floder->xml resource floder(重點:并且,要運行react-native run-android命令皇型;重點2:不要用android studio創(chuàng)建xml诬烹,也就是復制xml文本進android studio)
二十九:app的基礎設置(app名字,不能橫屏弃鸦、啟動圖等)
https://www.twblogs.net/a/5b85b35a2b71775d1cd3bb1c/zh-cn
https://blog.whezh.com/react-native-name-icon-launch/
三十:加法驗證碼
http://www.reibang.com/p/f82872224566
三十一:react-native經(jīng)典庫推薦
http://www.051z.cc/food/javascript/p_343.html
三十二:滑動驗證碼
https://github.com/asyalas/react-native-verification
其中注意:滑動異常的解決方案
你可以嘗試把
this.move += e.nativeEvent.locationX
改成
this.move = gesture.dx
三十三:Android 8.0跳坑之'Only fullscreen opaque activities can request orientation'(榮耀8報錯)
https://blog.csdn.net/DadaCockWire/article/details/80250152
三十四:照相機和圖片 react-native-image-picker以及 react-native-image-crop-picker
https://segmentfault.com/a/1190000015735377
三十五:在完成app時绞吁,盡可能多用庫,不用考慮大小唬格,自己學的效果太差家破,后期再考慮瘦包
三十六:采用圖片選擇器時颜说,用這個庫
react-native-syan-image-picker
三十七;"data" is required in save()!錯誤的解決辦法
就是在storage中set或save了null,因此再報錯
三十八:js中[] == ''也是成立的汰聋,當然用===就不成立了
三十九:退出應用采用此方法
SplashScreenModule.java中添加
? ? /**
? ? * 退出程序
? ? */
? ? @ReactMethod
? ? public void exit() {
? ? ? ? if (getCurrentActivity() != null)
? ? ? ? ? ? getCurrentActivity().finish();
? ? ? ? System.exit(0);
? ? }
四十:熱更新门粪,沒有經(jīng)過pushCode的實現(xiàn)方法
https://juejin.im/post/5c2038bff265da61542da11c
四十一:React Native 性能優(yōu)化總結
https://github.com/amandakelake/blog/issues/49
四十二:React-Native Android第一次安裝成功后,點擊Home鍵烹困,打開重啟問題
https://blog.csdn.net/Ghost_tal/article/details/89476644
四十三:百度地圖的安全碼就是開放平臺設置ak后玄妈,自動形成的,也就是在逆向地址編碼時韭邓,需要的參數(shù)
四十五:網(wǎng)易云私信
https://github.com/reactnativecomponent/react-native-netease-im/pull/19
四十六:字符串轉數(shù)組
var array1 = list.replace('[{', "");
var array2 = array1.replace('}]', "");
var array = array2.split(",");
四十七:網(wǎng)易云信發(fā)送文本報錯措近,就是glide中的string(同學說string為空的緣故)
切換賬號搞定此問題
真正問題的來源,經(jīng)過調(diào)試之后發(fā)現(xiàn)在ReactMsgListManager.java文件中女淑,231行到242行注釋掉瞭郑,就不會崩潰了,但是圖片沒有顯示出來
//? ? ? ? ? ? ? ? ? ? ? ? RequestManager m = Glide.with(reactContext);
//? ? ? ? ? ? ? ? ? ? ? ? DrawableTypeRequest request;
//
//? ? ? ? ? ? ? ? ? ? ? ? if (string.startsWith("http://") || string.startsWith("https://")) {
//? ? ? ? ? ? ? ? ? ? ? ? ? ? request = m.load(string);
//? ? ? ? ? ? ? ? ? ? ? ? } else {
//? ? ? ? ? ? ? ? ? ? ? ? ? ? request = m.load(new File(string));
//? ? ? ? ? ? ? ? ? ? ? ? }
//? ? ? ? ? ? ? ? ? ? ? ? request.fitCenter()
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .placeholder(IdHelper.getDrawable(reactContext, "aurora_picture_not_found"))
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .override(imageView.getMaxWidth(), Target.SIZE_ORIGINAL)
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .into(imageView);
四十八:接上述鸭你,顯示圖片的問題的解決辦法
原來是react-native-syan-image-picker和IM庫中的glide版本有沖突
查了很久屈张,不是兼容性問題,并不是兩個版本問題
四十九:發(fā)送圖片失敗袱巨,改為react-native-image-crop- picker選擇圖片發(fā)送就ok了
五十:react-native庫(第三方)
https://juejin.im/post/5b915770e51d450e9f66de40
五十一:可滾動Tab
https://github.com/ptomasroos/react-native-scrollable-tab-view
五十二:react-native-image-crop- picker與react-native-syan-image-picker兼容性問題:ucrop重復依賴
根據(jù)錯誤信我可知是ucrop重復依賴阁谆,去library文件夾中查看,哪里有ucrop的重復愉老,去除就好
compile ('com.github.LuckSiege.PictureSelector:picture_library:v2.2.3') {
? ? ? ? exclude group: 'com.github.LuckSiege.PictureSelector', module: 'ucrop'
? ? }
因為com.github.LuckSiege.PictureSelecto中也有ucrop庫场绿,因此通過此方法去掉ucrop依賴,并且還依賴了com.github.LuckSiege.PictureSelector中除ucrop的庫
五十三:朋友圈文件
https://github.com/yubo725/rn-wechat/blob/master/app/screens/MomentScreen.js
五十四:圖片兼容后,glide的版本不兼容解決辦法
compile ('com.github.LuckSiege.PictureSelector:picture_library:v2.2.0') {
? ? ? ? exclude group: 'com.github.LuckSiege.PictureSelector', module: 'ucrop'
? ? ? ? exclude group: 'com.github.bumptech.glide'
? ? }
exclude就是排除的意思外驱。
這么操作之后就會發(fā)現(xiàn)項目依賴的是自己引入的3.7的glide了祖屏。
五十五:當依賴有沖突時,強制統(tǒng)一依賴熬拒,在configurations.all 加入以下即可
// 統(tǒng)一使用glide3.7.0
? ? resolutionStrategy {
? ? ? ? force 'com.github.bumptech.glide:glide:3.7.0'
? ? }
五十六:當react-native-syan-image-picker改為glide3.7后,圖片功能失敗垫竞,因此
compile ('com.github.LuckSiege.PictureSelector:picture_library:v2.0.6') {
? ? ? ? exclude group: 'com.github.LuckSiege.PictureSelector', module: 'ucrop'
? ? }
v2.0.6中澎粟,glide為3.7.0
五十七:調(diào)試過程中,很多方法會失效欢瞪,可以關閉debug來解決
關閉chrome debugger
五十八:import中路徑名后面的名字是文件名
五十九:匿名方法拿參數(shù)時活烙,需要在匿名中添加參數(shù);傳參數(shù)時遣鼓,匿名方法中的方法給參數(shù)值
六十:設置小紅點(react-natvie-navigation)
badge: ' ', // 設置空字符串就是小紅點
badgeColor: 'red',
六十一:文件上傳時瓣颅,boundary設置出問題,導致無法發(fā)送成功
https://segmentfault.com/a/1190000010205162
六十二:state方法
state更新無效譬正,將setState方法重寫一下就好了
六十三:required cycle (依賴庫中)的解決辦法是直接忽略
因為并不是真出現(xiàn)了循環(huán)引用(我們在使用中宫补,沒有循環(huán)引用)檬姥,因此如下解決方法
YellowBox.ignoreWarnings(['Warning:', 'Possible', 'Debugger', 'http', 'cycle']);
六十四:react-native中報錯:make sure to start component names with a capital letter
在JSX中,小寫標記名稱被認為是HTML標記粉怕。但是健民,帶點(屬性訪問器)的小寫標簽名稱不是。
請參閱HTML標記與React組件贫贝。
<component />編譯成React.createElement('component')(html標簽)
<Component /> 編譯成 React.createElement(Component)
<obj.component /> 編譯成 React.createElement(obj.component)
六十五:特別重要的基礎類庫(image秉犹、text、page等)
react-native-element
https://tech.meituan.com/2018/09/27/waimai-beeshell-popularize.html
六十六:react-native錯誤“l(fā)ine:24049稚晚,column:31,sourceURL:http//localhost:8081/index.delta?...”
解決辦法:https://github.com/facebook/react-native/issues/10404
實際是沒網(wǎng)絡的原因
六十七:android studio出現(xiàn)scanning files to index的解決辦法
https://blog.csdn.net/weixin_41647586/article/details/89929472
六十八:react-native組件庫
http://www.reibang.com/p/18fd4b438958
六十九:ip不通崇堵、或者無網(wǎng)絡時,錯誤請求處理(line:139 column 2655 sourceURL:index.android.bundle)
七十:react-native link 的意思是:link所有依賴庫
七十一:拍照圖片已損壞是我查找答案時客燕,有些答案不屑于看鸳劳,實際這才是真正的能解決問題的答案(引以為戒)
需要動態(tài)獲取文件存儲權限
七十二:FastImage圖片未讀取出來原來是無網(wǎng)絡的原因,并不是庫的問題
七十三:Android依賴導入全攻略
https://juejin.im/post/5acd6daaf265da238a30ca73
七十四:圖片上傳小邏輯
http://www.reibang.com/p/1ecf892a0069
七十五:導入舊項目后報錯:Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory)...
http://www.reibang.com/p/f7a7a8765294
// 谷歌googlePlayGCM版本升級也搓,導致項目本身未兼容androidx而出錯赏廓,現(xiàn)在將googlePlayGCM的版本降下來,來解決這個問題(googlePlayServicesVersion = '8.3.0')
七十六:報錯com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
實際上是安卓API:28/29之間的沖突傍妒,當依賴未寫版本幔摸,而是依賴到更新版本是(以+結尾),當最新版本所依賴的庫更新到與本項目庫沖突時颤练,解決方法可依據(jù)依賴沖突解決方案
七十七:ReactNative——react-native-video實現(xiàn)視頻全屏播放
https://juejin.im/post/5a9f9fde518825557207e7b0
七十八:拍攝視頻(openVideo()方法中)
.openCamera(PictureMimeType.ofVideo())
改為:
.openGallery(PictureMimeType.ofVideo())
并在react-native-syan-image-picker中的index.js中添加:
openVideo(options, callback) {
? ? ? ? const optionObj = {
? ? ? ? ? ? ...defaultOptions,
? ? ? ? ? ? isCamera: false,
? ? ? ? ? ? allowPickingGif: false,
? ? ? ? ? ? allowPickingVideo: true,
? ? ? ? ? ? allowPickingGif: true,
? ? ? ? ? ? allowPickingImage: false,
? ? ? ? ? ? allowPickingMultipleVideo: true,
? ? ? ? ? ? videoMaximumDuration: 20,
? ? ? ? ? ? MaxSecond: 60,
? ? ? ? ? ? MinSecond: 0,
? ? ? ? ? ? recordVideoSecond: 60,
? ? ? ? ? ? videoCount: 1,
? ? ? ? ? ? ...options
? ? ? ? };
? ? ? ? return RNSyanImagePicker.openVideo(optionObj, callback)
? ? }
七十九:開發(fā)環(huán)境和調(diào)試環(huán)境中既忆,功能會不一樣哦,因此有些問題并不是代碼的問題嗦玖。(例如:拍攝視頻后患雇,不顯示剛保存的視頻問題)
八十:Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`
關閉調(diào)試模式即可
八十一:無法remote chrome
晃動手機彈出菜單,點擊DEV Settings ->Debug server host&port for device 配置電腦的ip:8081
八十二:React DevTools不會自動連接到RN
看到這種情況發(fā)生了幾次踏揣。刷新模擬器始終修復它庆亡。
八十三:Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported. This is most likely due to `Touchable.longPressDelayTimeout` not being cancelled.
是手機設備和電腦設備的時間不對應導致匾乓,改為電腦早一分鐘就好捞稿。
八十四:Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null,這是因為代碼中return同一行沒有代碼
render(){
? ? return
? ? (
? ? ? <div>
? ? ? ? <p>App test</p>
? ? ? </div>)
? }改為
render(){
? ? return (
? ? ? <div>
? ? ? ? <p>App test</p>
? ? ? </div>)
? }
后正常
八十五:優(yōu)化Android系統(tǒng)設置大號字體后布局錯亂的問題
https://blog.csdn.net/z191726501/article/details/47704137
八十六:failed to connect to ... (構建下載失斊捶臁)
const options = {
? fromUrl: formUrl,
? toFile: downloadDest,
? background: true,
? // progressDivider: 5,
? // connectionTimeout: 5, 這個連接超時導致構建下載失敗
? begin: (res) => {
? ? //開始下載時回調(diào)
? ? console.log('begin', res);
? },
? progress: (res) => {
? ? //下載過程中回調(diào)娱局,根據(jù)options中設置progressDivider:5,則在完成5%咧七,10%衰齐,15%,...继阻,100%時分別回調(diào)一次耻涛,共回調(diào)20次废酷。
? ? console.log('progress', res)
? }
}
八十七:封裝網(wǎng)絡請求時,不能用module.exports抹缕,而必須包含在class里(不一定澈蟆,有時候可以再module中,交替使用就好卓研,這是react-native的通才糠)
八十八:npm start -- --reset-cache啟動不了的時候,應該把react-native中的主項目中奏赘,build文件夾下的文件全部清空寥闪,或者clean一下項目
八十九:HTTP 413 錯誤 – 請求實體太大 (Request entity too large)
https://www.checkupdown.com/status/E413_zh.html
九十: