24 tips for React Native you probably want to know（你可能想知道React Native的24个技巧）

React native很棒。但事情可能会很艰难。以下是我从项目到项目的内容，我希望与您分享，这可能会为您节省一些时间。

1.用于调试

1.1断点

当IDE发疯时，像Visual Studio代码或Webstorm不会在断点处停下来，除了通过遍历Github问题搞清楚。您可以简单地在代码中放置一个调试器，然后它将在运行时停止执行。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

1.2附上打包程序

在开发时间内使用console.log时，您的信息将显示在浏览器控制台中。您可以直接从IDE查看控制台信息。如果您对Visual Studio代码使用react-native-tools。您只需转到调试选项卡并运行Attach to packager命令并重新加载应用程序。但是，你需要：

  • 关闭Chrome，因为只应为一个打包程序进程附加一个调试程序
  • Packager本身需要打开。

这样做的好处不仅在于热模块重载仍然有效，而且您可以在编写代码时在IDE内调试代码。

1.3Atom

是的，VSC要好得多，但你需要知道你可以直接在Atom里面打开反应调试工具（比如你在Chrome中安装的那个）...而且，是的，Nuclide支持RN，再次...只是想让你知道...

1.4如何检查桥梁（Bridge）

我们都知道原生和js之间有一座桥梁。 React native使用它在两者之间进行通信以进行UI更新等。这是你如何检查它。只需将以下代码添加到index.js：

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue.js';
const spyFunction = (msg) => {
  console.log(msg);
}
MessageQueue.spy(spyFunction)

然后在调试器的控制台中，您应该看到许多消息：

Object {type: 0, module: "JSTimers", method: "callTimers", args: Array(1)}

type字段的意思是：

  • 如果type等于0表示数据从native到JavaScript;
  • 如果它等于1，则数据从JavaScript变为本机。

1.5本机调试，必备

Xcode：运行应用程序后，按Debug View Hierarchy按钮，它将以3D方式显示所有视图。您可以以非常直观的方式检查全视图树。这是让自己感到内疚的绝妙方式，因为现在你知道你的UI实际上有多复杂，即使它似乎采用了极简主义的设计理念。只需查看谷歌图片，看看它有多酷。

Android studio：请务必查看Android Profiler，这是一款分析应用在Android上的性能的绝佳工具。 CPU，内存，网络，你能得到所有你想了解的东西。

1.6检查本机日志

万一你忘记：

  • react-native log-ios
  • react-native log-android

您可以从命令行查看本机日志。

1.7推荐

一个可爱的调试工具是reactotron。用于检查React JS和React Native项目的桌面应用程序。 macOS，Linux和Windows。真的很美。

如果您使用的是Mac。 react-native-debugger是另一个很好的候选者。它将React Inspector / Redux DevTools结合在一起。只需两步。

  1. 安装：brew update && brew cask install react-native-debugger
  2. 运行：open“rndebugger：// set-debugger-loc？host = localhost＆port = 8081”

1.8刷新后仍然得到Packager is not running的结果

有时一切都是正确的，但你仍然得到那个打包器没有运行消息，而不是使用CMD + R刷新页面，你只需要点击底部的刷新页面按钮，我知道，它们应该是相同的。但…

1.9对于YellowBox

是的，您可以使用YellowBox.ignoreWarnings（['警告：isMounted（...）已弃用'，]）忽略黄色框中显示的警告。但是，将链接置于GitHub问题可能会更好。以防万一你可以定期检查，最后删除它。

2你处于不同的环境中

2.1结果不同

在大多数情况下，React Native将使用JavaScriptCore，这是为Safari提供支持的JavaScript引擎。

请注意，在iOS上，由于iOS应用程序中缺少可写的可执行内存，JavaScriptCore不使用JIT。

使用Chrome调试时，所有JavaScript代码都在Chrome内部运行，并通过WebSockets与本机代码进行通信。 Chrome使用V8作为其JavaScript引擎。

这是非常重要的事情要记住，我已经处理的一个案例是moment.js实际上表现不同。例如，这个月是五月，所以对于以下代码：

moment().month()
// will return 4 because moment's index starts from 0

它仅适用于通过jest进行测试（因为您使用的是Node，并且该行为是预期的文档），但是当您在react native环境中运行它时。你会得到5。

所以，这里的要点是：

  • 日期就像导航那样，是RN的神奇黑洞，请记住这种差异。
  • 不要总是质疑自己。

令您惊讶的是，当您在模拟器中运行故事书本机时，运行时仍然不是JSC，因此上述结果将再次为4 ...

2.2更新你的JSC for android

我忘了，但在一个极端情况下，更新JavaScriptCore实际上解决了问题。官方jsc-android自2016年以来未更新。请使用社区一，jsc-android-buildscripts

打开链接，跳到如何使用我的React Native应用程序部分。实际上很容易。

3.更新您的Android项目

如果您是原生开发人员，那么所有设置都太旧了，而不是旧兼容性。它更像是几个世纪以来失去了团队的爱。但一切都是透明的。在更新之前，请确保没有任何遗留插件仍然需要旧版本。但是你仍然可以更新，如果发生任何错误就git重置。

3.1更新gradle

Gradle是JVM世界中使用的构建工具。

打开android / gradle / wrapper / gradle-wrapper.properties，找到distributionUrl =行

将gradle版本更改为4.5.1，结果如下所示：

distributionUrl = HTTPS \：//services.gradle.org/distributions/gradle-4.5.1-all.zip

3.2生成模板后立即更新您的Android项目

  1. 在android / app /下打开build.gradle
  2. 找到android {}块
  3. 将以下版本更改为以下版本 
    compileSdkVersion 27
buildToolsVersion“27.0.3”
minSdkVersion 16
targetSdkVersion 27
  1. 在依赖项块中，更改appcompat行以匹配目标版本
  • 编译“com.android.support:appcompat-v7:27.1.1”
  1. 在android / build.gradle中

更新android build tools
classpath'com.android.tools.build：grad：3.12'

3.3缩减你的APK

默认情况下，由React native生成的APK包含x86和ARM的JSCore二进制文件。如果您不需要x86，可以减小尺寸。

将以下行添加到/android/app/build.gradle：

def enableSeparateBuildPerCPUArchitecture = true

它应该生成2个APK，一个用于x86，一个用于ARM，将所有这些上传到Google Play，用户将根据他们的设备获得正确的一个。

3.4 Gradle

如果你想学习gradle的东西，我建议你从我的博客开始：从gradle开始，创建一个简单的build.gradle。它比官方文档容易理解，花费大约10分钟。

4. Image, Image, Image

4.1使用WebP可以节省20％的空间。并最终成为一个较小的包装商

但对于Android，您需要添加一些东西来进行gradle。来自官方文件：

您需要在android / app / build.gradle中添加一些可选模块，具体取决于您的应用程序的需求。

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.3.0'
  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.3.0'
  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'
  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'
}

4.2对于当前版本的RN

你可以只需要（'/ img / mine.png'）来加载它。

4.3这就是你如何写原生

有时候，即使把图像放在那里也会让你的应用感觉更快。

对于iOS

  • 打开Xcode，找到Images.xcassets，将静态资源拖入其中。
  • 确保它包含在构建阶段：构建阶段 - >复制捆绑资源。
  • 像这样使用它：
<Image source={{uri: 'goodImage'}} />

不需要扩展，您可能需要添加宽度和高度来实际渲染它。

对于Android

  • 打开Android Studio
  • 将图像拖到此文件夹：android / app / src / main / res / drawable
  • 文件名应以字母开头
  • 然后像iOS一样使用它

5.React技术仍然适用

5.1 PureComponent 是不够的

如果您使用react-navigation，就像react-router一样，他们需要在导航道具中包含一个动态变量，以便在更改路径时重新渲染。它会使PureComponent无用，因为它只是对所有属性进行浅层检查。您需要实现自己的shouldComponentUpdate（）并验证除导航之外的任何属性。就这么简单。一行很好：

shouldComponentUpdate(nextProp) {
    return nextProp.data != this.props.data
}

5.2对于模式

—— 未完待续 ——

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄