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加权限

十七:报错: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组件。

编译成React.createElement('component')(html标签)

编译成 React.createElement(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

    (

     

       

App test

     

)

  }改为

render(){

    return (

     

       

App test

     

)

  }

后正常

八十五:优化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

九十:

你可能感兴趣的:(react-native开发笔记)