React-Native开发时做的笔记

论*持久战讲的就是成功做事的方法和战略

已于 2024-05-06 10:25:39 修改

阅读量636

点赞数 1

文章标签：笔记

于 2020-12-01 19:53:39 首次发布

本文链接：https://blog.csdn.net/u014544346/article/details/110449556

版权

图片笔记

图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager 就会去这个组件所在的文件夹下查找my-icon.png。并且，如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。
打包的时候，在0.59.9这个版本里，只有代码里用到了资源，打包时用asset dest时，本地才会看到资源。
在进行npm install kdkkdk 某某库的时候，有可能会给Podfile 写入一些东西，这个要特别注意。具体原理不清楚，为什么能写入，有大佬欢迎指教。

打包笔记

主要不能用sh调用，只能用./调用
文件前必须有#!/bin/sh
shc -T -f l.sh
sudo chmod -R 777 某一目录给文件添加权限
brew install telnet
telnet 10.168.7.50 ****(端口号)
如何测试网络
kill $(ps aux | grep ‘Xcode’ | awk ‘{print $2}’)
这个命令会导致Xcode有问题
有一次突然不能上github了，其他的没问题，我通过删掉hosts里面的配置，就好了

错误记录

1.evaluating ‘RNGestureHandlerModule.default.Direction’
这是因为没有将RNGestureHandler引入进来，通过project方式，不可取，没有编译，BR don help to find the result.
顺带将下面这些库全部解决好

这些库都依赖React-core，而这个工程里面有没有React-Core，那我就将React-Core全部换成React
2、库的集中统一管理包括以上这些库
3、需要将React里面对folly的依赖改为2016.1那个版本，2018的没有了
4、我是怎么知道，没有编译的，看到我提供的一个0.5.78版本能跑，试了一下，在我的demo里的gesture-handler，添加一些错误的代码，居然不报错，断定这个库根本就没有编译，那为什么，0.5.78也是采用project方式的，就没问题呢，后面我在这个地方:(thanks Fudon for outstanding thinking)：

0.5.78有这个.a文件，而我的没有，卧槽，终于找到了。

编译器

1.右击软件图标，可以创建多个窗口
2.遇到警告的地方，稍微停留久一点，就会发现提示信息
3.rn有热更新，不需要每次都跑一遍工程
4.可以将一份js拷贝出来放到桌面上，同事打开另一个工程，可以将桌面上的拖到工程里面，可以对比哦，这样不是很方便了。

错误记录

错误2

undefined is not an object (evaluating ‘_this2.props.navigation’)
场景简介
在类的render里面调用了一个方法method，这个方法，里面又调用了this.props，导致了这个问题。这是典型的this问题，通过如下链接的第二种方案解决。即绑定解决。

React Native之this详解

错误3

在这里插入图片描述
这些库对React-core有依赖，需要将里面的依赖改为React,这是0.59.9的又一个坑。

错误4

直接通过project导入gesture-handler，发现没有编译，报错。

错误5

在这里插入图片描述
遇到这种情况，不要删除node_modules，直接调用watchman watch-del-all和react-native start --reset-cache就行了
记得不要删除这些node_modules，因为你会把之前对这个node_modules错误修改，全部还原了。
有的时候，不管你怎么操作，还是不起作用，是因为你的native用的版本是老的版本呢，需要更新你的native版本更新。

注意下面

在这里插入图片描述
这是本地服务器，我们的js就是通过这个服务器下载的

错误6

this.renderRow = this.renderRow.bind(this)
renderRow方法不能被触发，通过这个方式，就能触发了。

调试技巧

78：16是什么意思
出现错误的时候，提示了一些数字，这些数字是代表多少行，多少列出现了问题
点击可以跳转到指定的类

调试技巧2

在这里插入图片描述
点击这些红色箭头可以看目前跟之前的对比，看到变化。

调试技巧3

在这里插入图片描述
通过点击这里，可以将代码缩起来，这样就能将这一行所在的范围，全部缩起来，这样方便调试和添加代码。

调试技巧4

在这里插入图片描述
上面那个选项能做跟之前提交对吧，下面的箭头所指能关闭分页

点击这里是停止调试

在这里插入图片描述

调试技巧5，如何配置vscode

1.第一步装React native tools
2.安照下面文章进行配置，特别注意，第二步，选择调试配置，要选Debug iOS
3.如何关闭调试
关闭也可以点击那个红色的框，在上面的图里面
react native 调试技巧

调试技巧6

小程序扫一扫小程序
debug情形下出来的是错误
release情形出来的是崩溃，这点特别重要哦，我们debug出现的崩溃，等到了release情形下出来的就是崩溃

0.59.9特别注意，反思npm install 一个新库，这下面几项就要特别注意

1、引入memory.h
在这里插入图片描述

2、修改几个库的依赖，改为react
3、将对folly的依赖，改为2016的版本

卸载软件

在这里插入图片描述
卸载react-native-smart-refresh

在卸载之前先执行 react-native unlink xxx。
然后在执行 npm uninstall xxx --save 别忘了加–save。
然后清除缓存就好了，我觉得最重要是这一步

错误经历(在做刷新的阶段)

调试重大发现

调试的时候经常遇到说有另外一个程序在连接
在这里插入图片描述
这个时候怎么解决：
杀死所有的占用的8081进程
kill -9 lsof -t -i:port
这里要改成
kill -9 lsof -t -i:8081
就好，完全能实现，很棒啊。
貌似这个额还不行，需要做如下几步：
1、关闭vscode重启，工程点击调试
2、或者点击下面的所指，不用重启，也无需让代码执行完，牛逼
在这里插入图片描述
原理是：8081被人占用了，这就是原理啊。要将他们全部kill

解决方案1：怎么解决：kill $(lsof -t -i:8081)
发现上面的无效，下面的才有效，如果在当前的目录里调用这个代码，还是不行，那就就如根目录，运行这些代码，就可以了。
对8080也有效
在这里插入图片描述
kill $(lsof -t -i:8080)会杀死企业微信

第一个

问题：

Metro Bundler has encountered an internal error, please check your terminal error output for more details

解决方案1：怎么解决：kill $(lsof -t -i:8081)
解决方案2：是因为自己之前添加了一个文件metro.config.js指定了路径，导致，出现了问题，我将这个文件以及RNMonitor(包含NBSTransformer.js)就好了。

第二个

react-native run-ios要注意是在根目录下哦
和debug调试一样的，可以换成第一种，可以复现一些问题。

### 第三个(这个问题折腾我两三天的时间)
问题描述：react-native开发异常处理——PCH was compiled with module cache path
解决方案：
造成调用命令运行项目怎么也运行不起来，但是通过Xcode工具却能正常运行。

根据错误提示，我想应该是调用命令运行时，使用了移动项目前正常运行时的缓存目录，而项目移动后调用命令时仍然使用了缓存目录，所以造成找不到文件的情况。根据这种思路，果然在项目的ios目录下找到了build目录（项目-ios-build）运行时的缓存。

那是不是删除build目录后，再运行就不会错了呢？因为项目初始化首次运行前估计也是没有build目录吧。抱着这种想法，删除build目录后，果然运行正常了。

删除目录

`rm -rf ios/build`，和`yarn start —reset-cache`一样大用

参考链接：https://blog.csdn.net/potato512/article/details/80283821
这个问题的在调试阶段的表现形式是：
在这里插入图片描述

或者如下的表现形式：
在这里插入图片描述
这个问题怎么产生的：
就是你简单的拷贝了一份，却没有做任何修改，这个通过上面的命令(rm -rf ios/build)，就能改好了。
提示很明显
有的时候，这个步骤也不一定有效，那就重启电脑和IDE

要特别注意，调试时要关闭浏览器的调试器，否则会出现如下的问题：

第三个

提示说另外一个进程打开了，需要关闭，重新打开vscode就好了，这个我通过重启电脑就解决了。

第四个

解决React native ‘config.h’ file not found错误

cd node_modules/react-native/third-party/glog-0.3.4
../../scripts/ios-configure-glog.sh

摘自：https://blog.csdn.net/x605940745/article/details/85044763

如何杀死8081进程

在这里插入图片描述
参考：https://blog.csdn.net/onlyliii/article/details/79982220

注意：lsof是什么意思，它是列出打开文件的意思，英文是lists openfiles

在这里插入图片描述

第四个

在这里插入图片描述
这里面的default不能去掉，否则就出现下面的这个问题

第五个，代码对比

打开对比
这个按钮关闭对比

第六个

getCurrentAppState:error

需要将下面的改为
static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||

           RCTReadString(input, "__attribute__((__unused__))") 
}

这一段

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||

           RCTReadString(input, "__attribute__((__unused__))") ||

           RCTReadString(input, "__attribute__((unused))");
}

第七个

在这里插入图片描述
注意这里不能加逗号，否则会报错

第八个

延后保存，code -->首选项–>设置中心
在这里插入图片描述

第九个

onPress={()=>{this._springHide()}}
这个只能这么写，如果写成这样onPress={this._springHide()}
就会导致这个刚一进入就springHide调用了

第十个

使用TouchableOpacity，居然导致引入下面这个
import { TouchableOpacity } from ‘react-native-gesture-handler’;
导致了错误
其实我们应该按如下的导入
在这里插入图片描述

第十一个

貌似FlatList不能添加阴影，可以在其底部加一个视图解决这个问题（Shadow）,react native的阴影跟原生的阴影差不多，只是安卓的要特殊处理

第十二个

Text在style里面设置opacity为零是可以的，但是我们将它作为一个属性opacity={this.state.opactityValue}这个来动态设置，发现就不行，但是Image是可以的，Image可以通过opacity={this.state.opactityValue}动态设置其透明度
如果要想一起动态设置Text和Image的透明度，将他们放到一个视图上面，设置底部那个背景视图的透明度，是可以的
Text是继承TextBase不是继承View，这个跟oc不是一样的继承关系哦

第十三个

在这里插入图片描述
因为没有导入Animated，居然会自动导入这些东西

第十四个

在这里插入图片描述
文字变暗，表示这些代码没有调用，需要将这段代码上面的空格去掉

第十五个

在这里插入图片描述
在cons通过声明数组的形式，在调试环境，能看到本地的数据，防止下面打印的无效

第十六个

linearGradient不见
在这里插入图片描述
遇到这种错误，更新podfile文件即可。
一般遇到这种东西不见的，很可能是podfile里面的库没有更新。

第十七个

在这里插入图片描述
特备注意，使用 {this.blankView()},类似这样{}创建的是图片的时候，不能在大括号后面加分号，否则
就会是语法错误，引发类似上面的严重问题。

第十八个

加载的全部是老的包，怎么办，检查sh loadResouce.sh的过程，看有没有代码的问题。
调试的逻辑是直接将包覆盖掉呢

导航栏的问题(599)

在这里插入图片描述
这个是导航栏问题，我做了如下操作：
1、将如下信息

改为
“react-navigation”: “^3.4.1”，如下图
在这里插入图片描述

代码层面的更改：
在这里插入图片描述
是将create，StackNavigator移除出来到上面那行，然后去掉了那个bottom类。
原先的代码：

import { createAppContainer, createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json
import { createStackNavigator } from 'react-navigation-stack';

第三步：
podfile里面的路径要更改，否则问题很大

从58.6回到59.9
库的完整版：
(1)换库
“@react-native-community/masked-view”: “^0.1.10”,
“@react-native-community/viewpager”: “^3.3.0”,
“@react-navigation/native”: “^5.9.4”,
“@react-navigation/stack”: “^5.14.4”,
“react”: “16.8.3”,
“react-native”: “0.59.9”,
“react-native-gesture-handler”: “^1.9.0”,
“react-native-linear-gradient”: “^2.5.6”,
“react-native-reanimated”: “^2.1.0”,
“react-native-safe-area-context”: “^3.2.0”,
“react-native-screens”: “^1.0.0-alpha.23”,
“react-native-svg”: “^12.1.1”,
“react-native-swiper”: “^1.6.0”,
“react-navigation”: “^4.4.3”,
“react-navigation-stack”: “^2.10.2”,
“react-timer-mixin”: “^0.13.4”
(2)更改podfile（源以及库）
(3)修改首页代码

出现的问题并如何解决：
在这里插入图片描述
添加了screen和animated库

在这里插入图片描述
库安装即可

有些需求没有导航栏，比如红包需求，不需要走上面的几步。

十九个

在这里插入图片描述
这个问题需要关闭app上的远程调试哦

二十个

https://blog.csdn.net/gg_ios/article/details/104927354
在这里插入图片描述
这个解决了，我那个cookier突然增加信息的问题

编译器

在这里插入图片描述
这些竖线告诉你竖的位置在多少行

没有绑定这么写

onPress = {(this.lookBackAction())}>
引发如下的错误
在这里插入图片描述
常见的写法：

`、onPress = {()=>(this.lookBackAction.bind(this))}>
为什么需要先绑定this.lookBackAction = this.lookBackAction.bind(this)
不能这么写：
onpress = {this.lookBackAction()}
2、卧槽 onPress = {this.lookBackAction.bind(this)}>
居然等同于onPress = {()=>(this.lookBackAction())}>
3、onPress = {()=>this.lookBackAction()}>
不绑定也一样，能调用
4、但是onpress = {this.lookBackAction()}
却不行，这样会形成循环循环应用
5、或者换成onpress = {this.lookBackAction}
lookBackAction= () => {}
这种方式跟第四种一样