react-native开发笔记
一：出现:
unknown platform:react-native
ReferenceError:printExample is not defined
错误，
则:
npm install / yarn install;
npm start;
二：出现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 环境并重启试试 $ 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版本依赖一定要做到统一，不然会出现重复依赖，不管是module中还是app中，都要这样做
八：一般出现引用错误都是缓存问题，先清除缓存，在编译
九：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，否则出现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.
十四：二维码生成，扫描（还未实现相册选择图片功能）
https://www.jianshu.com/p/dd1474c0a0cf (react-native-qrcode)
https://www.jianshu.com/p/bfad4c158f07 (react-native-qrcode-svg, react-native-camera)
扫描二维码界面的生成
https://blog.csdn.net/qq_34619754/article/details/83346602
十五：导入百度地图后出现，错误app:transformDexArchiveWithDexMergerForDebug
https://www.jianshu.com/p/7192eb0065a0 （百度地图的插件安装方法）
https://github.com/lovebing/react-native-baidu-map （git上，百度地图第三方库）
这个错误的解决：这是个依赖重复的错误，实际上后面还有一句话：方法数剧增，超过64k
解决办法是：https://www.jianshu.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
https://www.jianshu.com/p/be012c4b3e66
解决办法：adb reverse tcp:8081 tcp:8081
十八：百度地图xml配置详细解释
https://zhulichao.github.io/2017/06/17/react-native-baidu-map-android/
十九：实现自定义标记
https://www.jianshu.com/p/030d2be37095
Overlay：简单说明
https://blog.csdn.net/WuLex/article/details/79530450
Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
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
二十五：浏览器控制台显示数组不全时：使用以下方法
console.log(JSON.stringify(数组或对象));
二十六：获取地图位置、相册等，需要动态权限
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循环中传参，一定要注意for里面的值不能用var，得用let
二十八：xml资源文件夹的创建方式，不能手动自己create，应该是，new->floder->xml resource floder（重点：并且，要运行react-native run-android命令；重点2：不要用android studio创建xml，也就是复制xml文本进android studio）
二十九：app的基础设置（app名字，不能横屏、启动图等）
https://www.twblogs.net/a/5b85b35a2b71775d1cd3bb1c/zh-cn
https://blog.whezh.com/react-native-name-icon-launch/
三十：加法验证码
https://www.jianshu.com/p/f82872224566
三十一：react-native经典库推荐
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);
}
四十：热更新，没有经过pushCode的实现方法
https://juejin.im/post/5c2038bff265da61542da11c
四十一：React Native 性能优化总结
https://github.com/amandakelake/blog/issues/49
四十二：React-Native Android第一次安装成功后，点击Home键，打开重启问题
https://blog.csdn.net/Ghost_tal/article/details/89476644
四十三：百度地图的安全码就是开放平台设置ak后，自动形成的，也就是在逆向地址编码时，需要的参数
四十五：网易云私信
https://github.com/reactnativecomponent/react-native-netease-im/pull/19
四十六：字符串转数组
var array1 = list.replace('[{', "");
var array2 = array1.replace('}]', "");
var array = array2.split(",");
四十七：网易云信发送文本报错，就是glide中的string（同学说string为空的缘故）
切换账号搞定此问题
真正问题的来源，经过调试之后发现在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版本有冲突
查了很久，不是兼容性问题，并不是两个版本问题
四十九：发送图片失败，改为react-native-image-crop- picker选择图片发送就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重复依赖
根据错误信我可知是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就是排除的意思。
这么操作之后就会发现项目依赖的是自己引入的3.7的glide了。
五十五：当依赖有冲突时，强制统一依赖，在configurations.all 加入以下即可
// 统一使用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
五十七：调试过程中，很多方法会失效，可以关闭debug来解决
关闭chrome debugger
五十八：import中路径名后面的名字是文件名
五十九：匿名方法拿参数时，需要在匿名中添加参数；传参数时，匿名方法中的方法给参数值
六十：设置小红点（react-natvie-navigation）
badge: ' ', // 设置空字符串就是小红点
badgeColor: 'red',
六十一：文件上传时，boundary设置出问题，导致无法发送成功
https://segmentfault.com/a/1190000010205162
六十二：state方法
state更新无效，将setState方法重写一下就好了
六十三：required cycle （依赖库中）的解决办法是直接忽略
因为并不是真出现了循环引用（我们在使用中，没有循环引用），因此如下解决方法
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错误“line：24049，column:31,sourceURL:http//localhost:8081/index.delta?...”
解决办法：https://github.com/facebook/react-native/issues/10404
实际是没网络的原因
六十七：android studio出现scanning files to index的解决办法
https://blog.csdn.net/weixin_41647586/article/details/89929472
六十八：react-native组件库
https://www.jianshu.com/p/18fd4b438958
六十九：ip不通、或者无网络时，错误请求处理（line:139 column 2655 sourceURL:index.android.bundle）
七十：react-native link 的意思是：link所有依赖库
七十一：拍照图片已损坏是我查找答案时，有些答案不屑于看，实际这才是真正的能解决问题的答案（引以为戒）
需要动态获取文件存储权限
七十二：FastImage图片未读取出来原来是无网络的原因，并不是库的问题
七十三：Android依赖导入全攻略
https://juejin.im/post/5acd6daaf265da238a30ca73
七十四：图片上传小逻辑
https://www.jianshu.com/p/1ecf892a0069
七十五：导入旧项目后报错：Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory)...
https://www.jianshu.com/p/f7a7a8765294
// 谷歌googlePlayGCM版本升级，导致项目本身未兼容androidx而出错，现在将googlePlayGCM的版本降下来，来解决这个问题（googlePlayServicesVersion = '8.3.0'）
七十六：报错com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
实际上是安卓API:28/29之间的冲突，当依赖未写版本，而是依赖到更新版本是（以+结尾），当最新版本所依赖的库更新到与本项目库冲突时，解决方法可依据依赖冲突解决方案
七十七：ReactNative——react-native-video实现视频全屏播放
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)
}
七十九：开发环境和调试环境中，功能会不一样哦，因此有些问题并不是代码的问题。（例如：拍摄视频后，不显示刚保存的视频问题）
八十：Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`
关闭调试模式即可
八十一：无法remote chrome
晃动手机弹出菜单，点击DEV Settings ->Debug server host&port for device 配置电脑的ip:8081
八十二：React DevTools不会自动连接到RN
看到这种情况发生了几次。刷新模拟器始终修复它。
八十三：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>)
}
后正常
八十五：优化Android系统设置大号字体后布局错乱的问题
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) => {
//开始下载时回调
console.log('begin', res);
},
progress: (res) => {
//下载过程中回调，根据options中设置progressDivider:5，则在完成5%，10%，15%，...，100%时分别回调一次，共回调20次。
console.log('progress', res)
}
}
八十七：封装网络请求时，不能用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
九十：
