热更新（2022-09-22）

React Native的热更新，确实为开发者提供了很多方便，但是必须承认，它存在着一些问题。尤其是当两次版本改动比价大的情况下，热更新很多时候就会失效。在我学习React Native伊始，我经常会从网上复制下来一段例子代码粘贴到我本地的环境中运行，看看效果。

由于很多时候，前后2次粘贴的内容相差特别大，导致热更新经常得不到正确的结果，或者报错，或者页面没啥更新，或者更新不对。这样导致了一个很严重的后果，作为初学者，我不知道是因为代码里的内容有问题，还是因为热更新。

在我学习初期，曾经真实发生过一个案例。那天我先粘贴了一段ScrollView的代码，后来又粘贴了一段FlatList的代码，当我粘贴FlatList的代码后，突然发现scroll功能不好用了。我想当然的认为，是因为后一段代码有问题，于是就各种改，各种尝试，结果一直不好用。折腾了很久，浪费了很多时间。后来万般无奈下，我又粘贴回了第一段ScrollView的代码，结果竟然也不好用。果断重启后，两段代码都好用了。

所以，我在初学的那段日子里，因为我没有能力判断是代码还是热更新导致的问题，我果断关闭了热更新。摇晃手机，弹出的选项里，选择Disable Fast Refresh。

有些极端情况下，即使手动Reload后，也是有问题的，此时就需要把当前调试的APP在手机上终止，然后再重新打开。

无效的动画（2022-09-23）

当我用真机调试一段动画代码时，我发现我的代码并没有起作用，比如我设置的duration是1200，那么在起始时，style根本就没有任何变化，在时间到达后，突然显示了最终的效果，中间完全看不出来渐变。起初以为是代码写错了，后来发现，是由于我的手机太卡。我不知道是我手机不行，还是只要是真机远程调试动画，就会导致动画卡顿。当我把duration改成12000后，终于可以看到卡顿的动画效果了，证明了代码没问题，但是体验极差。所以一般调试动画，我都会切换回模拟器来调试，效果顺滑真实。

我在手机上调试动画时，设置 useNativeDriver: true，这也可能是导致我手机调试动画时卡顿的原因。

当我把设置 useNativeDriver: true，动画果然顺滑了，不再卡顿。但是当useNativeDriver为false时，涉及到布局动画的地方，就会报错。

此时需要将布局属性动画转换成非布局属性动画才行。

另外，当useNativeDriver为true时，InteractionManager.runAfterInteractions 就失效了，会立即执行回调函数。如果当userNativeDriver为false时，你期待动画结束后，才回调某个函数去执行某个动作，那么设置为true后，这个回调会立刻执行，而动画，会在回调函数执行后，还在Native的线程中，慢悠悠的执行。

"RNSScreen" was not found in the UIManager（2022-09-29）

这个错误是我刚刚开始学习React Navigation时，就遇到的。如果有人和我遇到一样的问题，那么大概你可能也是这样操作的：

打开一个既有的RN项目，或者新建一个RN项目。然后启动这个项目，发现模拟器或者实体机上都运行正常。
翻开React Navigation官方文档，照着从第一步一点一点操作。其中比如会像文档上说的那样：安装一些必要的包。
然后把第一个Hello React Navigation的例子，copy到项目中编译运行。
恭喜你，和我一样，大概率遇到这个报错。

我大概花了整整一个下午，在各种论坛上搜索解决方案，因为这个问题曾经真的在一些版本里存在，所以网络中充斥着一些当年的解决方案，但是那不是现在2022年我遇到的这个问题。经过各种尝试，终于在一个stack-overflow中，找到了一个票数不是很高的答案，但是它恰恰能解决我的问题。

That usually happens when you install all packages to add navigation without terminating the running build. Make sure to stop the running process for ( android or IOS ) then run it again after installing them and adding the routing components

简而言之，把正在运行的APP实例关了，然后重新安装React Navigation相关的包，都安装好了之后，再启动项目实例。这次，我的第一个Navigation运行起来了。

使用Web的事件响应（2022-09-30）

因为是前端出身，所以用RN写App前期，经常不自觉的写了如下面这样的Web的事件响应，悲催的是编译并不报错。

<Button title='go to detail' onClick={goToDetail}></Button>

把onClick改成onPress就好了。

Stack.Screen中的options传值错误（2022-10-01）

<Stack.Screen name='Details' component={DetailsScreen} options={(route) => ({title: route.params.otherParam})} />

我给DetailsScreen传递一个Title值，这个值是从route的params取得的，但是这段代码会报错。因为options的function的参数是一个对象。

所以正确代码应该是这样的：

<Stack.Screen name='Details' component={DetailsScreen} options={({ route }) => ({title: route.params.otherParam})} />

这严格来说，是我自己坑的自己，读文档不仔细。记录之，全当加深自己的印象了。

使用了错误的包加载Tab.Navigator（2022-10-02）

React Navigation官网上关于嵌入Navigation的章节中，使用的Tab.Navigator指的是它内置的bottom-tabs的Tab，而我起初以为是material bottom tab。而且在文档中的第一段的例子，并没有给出完整的代码，那段代码缺少的引用，如下：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
const Tab = createBottomTabNavigator();

React Navigation的Drawer的依赖问题（2022-10-04）

相对于Stack和Tab风格，Drawer风格的Navigator的依赖项很多，很容易就让项目无法启动。我尝试多次，大概总结出如下几点：

参考React Navigation官方文档，确保App没有运行的情况下，安装如下三个依赖：

yarn add @react-navigation/drawer
yarn add react-native-gesture-handler react-native-reanimated

参考Reanimated官方文档，确保babel plugin配置正确：

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

如果App启动时还是报错，那么就尝试运行

yarn start --reset-cache

，然后再重新执行yarn安装。

4.如果App启动时还是报如下这个错误：

那么就尝试将yarn.lock删除，然后安装如下两个依赖：

yarn add @babel/preset-env @babel/preset-typescript

具体详情参见Stackoverflow上的解释

不需要每次都重新编译android或者ios（2022-10-07）

原来不用每次启动都运行yarn android或者yarn ios，这两个编译命令是生成android和ios文件夹下的build文件，一旦build好了，只要没改动过android或者ios里面的东西，那么每次启动，只需要通过yarn start即可。当然，在启动前，需要先把模拟器打开，或者先通过USB连上真机。

这个设定看起来非常合理啊，可我竟然过了半个月才知道，也是没谁了。果然，散修就是这样的，一路自己磕磕绊绊摸爬滚打。

yarn ios失败的常用解决方案（2022-10-08）

yarn ios失败后，我每次都会用到的方法如下：

进入ios文件夹
run pod install
run rm -rf build
run cd ..
run yarn ios

xcode启动时包Booted的警告

打开xcode的Simulator Preferences，然后uncheck一个选项。直接上图：

React Native开发中，我踩过的坑

热更新 （2022-09-22）