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

九十：