[翻译]Review——24 tips for React Native you probably want to know

Post author: Albert Gao
Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you-probably-want-to-know/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

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

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

1.用于调试

1.1断点

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

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结合在一起。只需两步。

安装：brew update && brew cask install react-native-debugger
运行：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项目

在android / app /下打开build.gradle
找到android {}块

将以下版本更改为以下版本

compileSdkVersion 27
buildToolsVersion“27.0.3”
minSdkVersion 16
targetSdkVersion 27

在依赖项块中，更改appcompat行以匹配目标版本

编译“com.android.support:appcompat-v7:27.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对于模式

如果你没有过多地使用HOC（高阶组件）或渲染props，社区似乎每天都在谈论它们，这也没有什么不对，因为你会在需要时使用它们，你只需要知道何时使用它们，我觉得至少对我来说：

HOC更适合添加可重用的功能，比如我需要为TextInput添加一个功能，你只需将它们放在HOC中，然后包装TextInput。我只想要一个功能，没有任何变化。

您可以使用工厂方法和HOC生成相同组件的不同版本，就像我想生成5个不同的ListComponent一样，它们都是相同的，唯一的区别是它们专注于不同的redux状态。
您可能希望为HOC提供displayName以获得更好的调试体验。

当您尝试封装逻辑并让子组件根据更改的输入决定如何渲染时，渲染props很有用。这就是为什么你会看到它类似lambda的语法，因为它会将处理结果传递给子节点。

像Auth组件之类的东西，你在里面进行身份验证并将结果传递给子进程来进行渲染。

一个重要的事实是要记住：

React中的JSX元素不仅用于显示UI。您可以使用它们来声明构造您的逻辑。

只有在你接受了这个之后，当你看到渲染道具之类的东西时，你会感觉更好，否则，它看起来很烦人。

实际上，v2更新似乎相当不错。我知道这个库有一些非常不好的名声。但实际上并没有那么糟糕。它运作得很好。只是一些说明：

导航器可以嵌套。这意味着，如果您的主屏幕是3个底部标签，其中一个标签包含3个顶部标签栏。你需要做这样的事情。
```
const ListTab = createMaterialTopTabNavigator(
  {
    INBOX: pickListScreen(Category.INBOX),
    TODAY: pickListScreen(Category.TODAY),
    TOMORROW: pickListScreen(Category.TOMORROW),
  }
)
const MainScreen = createBottomTabNavigator(
  {
    Home: HomeScreen
    List: ListTab,
})
```
如果你想从HomeScreen导航到另一个，你需要在它们周围创建一个stackNavigator并用它替换上面的HomeScreen。
不，没有标题，它只能来自堆栈导航器，除非您将屏幕包装在堆栈导航器中，否则您将无法获得标题。

如果要删除标题阴影：

headerStyle:{
    // iOS
    borderBottomWidth:0,
    // Android
    elevation:0
}

7.如何选择开源项目

了解你的用例！
检查源代码，有时它非常简单，也许你只想要一个不同的API签名。
看stars，看看有多少注意力。较少关注可能很快就会得不到支持。
检查问题是否紧急。
检查公关，如果大量PR没有合并，那里必须发生一些事情。
检查提交。以前，当我检查sails.js的提交消息时。通过看到团队对修复readme.md或其他文档非常感兴趣而没有在几个月内推出有意义的代码，这让我大吃一惊......

8.对于CLI

如果您来自网络世界，您需要知道create-react-native-app不是create-react-app的等价物。这是一个由Expo提供的解决方案，基于官方的react-native-cli，它隐藏了那些远离你的原生项目。他们提供其他相当好的工具，react native。

但是如果你想要更多地控制你的项目，比如调整你的原生Android和iOS项目，我强烈建议你使用官方的react-native-cli。仍然是一个简单的命令，react-native init ProjectName，你很高兴。

因为无论何时你需要添加一些原生代码，这对于原生来说都是正常的，你还需要弹出create-react-native-app。

9. 对于Typescript

9.1关于设置

react-native init ProjectName --template typescript

9.2热加载不起作用怎么办

首先，确认您已关闭实时重新加载并打开热重新加载。然后，使您的根组件成为类组件。

我遇到了tsconfig.json导致问题的问题，在我删除所有注释后...热重新加载终于有效了。

9.3开始输入

对于无状态功能组件

import React from 'react'
interface IMyProp {
    name: string
}
const My: React.SFC<IMyProp> = ({name}) => ()

对于有状态功能组件

class My extends React.Component<IMyProp, IMyState>

对于Redux

// need to install @types/redux first
import { Dispatch } from 'redux'

10. End

希望能帮到您。

—— 完 ——

posted @ 2019-04-23 09:51 执白阅读(273) 评论(0) 编辑收藏举报

刷新页面返回顶部

执白

[翻译]Review——24 tips for React Native you probably want to know

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

1.用于调试

1.1断点

1.2附上打包程序

1.3Atom

1.4如何检查桥梁（Bridge）

1.5本机调试，必备

1.6检查本机日志

1.7推荐

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

1.9对于YellowBox

2你处于不同的环境中

2.1结果不同

2.2更新你的JSC for android

3.更新您的Android项目

3.1更新gradle

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

3.3缩减你的APK

3.4 Gradle

4. Image, Image, Image

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

4.2对于当前版本的RN

4.3这就是你如何写原生

5.React技术仍然适用

5.1 PureComponent 是不够的

5.2对于模式

6. React navigation

7.如何选择开源项目

8.对于CLI

9. 对于Typescript

9.1关于设置

9.2热加载不起作用怎么办

9.3开始输入

10. End

公告

执白

[翻译]Review——24 tips for React Native you probably want to know

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

1.用于调试

1.1断点

1.2附上打包程序

1.3Atom

1.4如何检查桥梁（Bridge）

1.5本机调试，必备

1.6检查本机日志

1.7推荐

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

1.9对于YellowBox

2你处于不同的环境中

2.1结果不同

2.2更新你的JSC for android

3.更新您的Android项目

3.1更新gradle

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

3.3缩减你的APK

3.4 Gradle

4. Image, Image, Image

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

4.2对于当前版本的RN

4.3这就是你如何写原生

5.React技术仍然适用

5.1 PureComponent 是不够的

5.2对于模式

6. React navigation

7.如何选择开源项目

8.对于CLI

9. 对于Typescript

9.1关于设置

9.2热加载不起作用怎么办

9.3开始输入

10. End

公告

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