📜  开始使用 React Native?先读这个!

📅  最后修改于: 2021-10-19 06:02:24             🧑  作者: Mango

几个月前,我开始了 React Native 的旅程。我发现它同时具有挑战性和满足感。开始使用 React Native 并不像许多其他框架那样顺利,但是一旦你通过了,你很快就会适应(特别是如果你已经能熟练使用 Javascript)。以下是我在此过程中学到的一些东西,如果你也开始了 React Native 之旅,它们会对你有所帮助。

  1. &&运算符用于条件渲染
    为了有条件地渲染组件,在 React 中使用 &&运算符是很常见的。例如,假设我们想在用户登录时显示用户详细信息(使用UserDetails组件)。我们可以按如下方式进行

    这是如何工作的,如果 &&运算符之前的值是真的(新的 JS 行话?看看这个),那么 &&运算符右边的值就会被渲染。

    但是,在使用 &&运算符时需要格外小心。假设在UserDetails组件内部,我们只想显示用户的电子邮件地址。所以我们可以再次使用与下面相同的 &&运算符

    但是等等,如果 emailAddress 是一个空字符串,那么你的应用程序就会崩溃。是的,它真的会崩溃。这是因为在 React Native 中,每个字符串(甚至是空字符串)都需要在标签中才能呈现到屏幕上。因此,当 emailAddress 是一个空字符串,它的计算结果为假值,因此&&运算符右侧的标记不会显示,而是应用程序尝试直接呈现值为“”的 emailAddress字符串,但它崩溃了。

    基于整数的条件渲染也是如此。例如,您只想在价格不为零时显示价格。您可以按照以下方式进行

    如果 product.price 的值为 0,这将再次使应用程序崩溃,同样是出于同样的原因。

    好的,那么我们如何解决这个问题呢?好吧,我们有两个简单的方法
    1. 确保 &&运算符左侧的值是布尔值。
    2. 使用三元运算符

  2. Android 和 iOS 上的不同行为

    永远记住,虽然大多数在 android 上运行的代码都可以直接在 iOS 上运行,反之亦然,但是,有些事情会表现得不同。例如,阴影和高程在 android 和 iOS 上的行为不同。

    此外,原生组件在 Android 和 iOS 上的行为可能有所不同。例如,’Picker’ 组件在 Android 和 iOS 上的行为不同。

  3. 总是尝试将组件分解成更小的组件
    有时我们觉得没有必要为屏幕的一小部分制作单独的组件。但是,大多数情况下,将其移至单独的组件是个好主意。从长远来看,它可以在很多方面为您提供帮助

    1. 很容易在后期重构代码(如果需要)。
    2. 移动/修改屏幕的一部分更容易,因为它已经是独立的
    3.你的代码没有不必要的不同意图的紧耦合

    有关示例,请参阅此处的官方文档。

  4. 尝试从 CDN 加载图像

    这更像是在使用移动应用程序时要遵循的一般准则。 Web 应用程序开发和移动应用程序开发的主要区别在于更新/修复应用程序的灵活性。对于 Web 应用程序,您可以随时免费发送更新,人们几乎可以立即获得更新。但是,对于移动应用程序,一旦您从您的终端更新应用程序,最终更新其应用程序并获取最新版本的时间取决于用户。此外,非常频繁地发送更新也可能会激怒您的用户,因为他们必须经常更新您的应用程序。

    现在回到从 CDN 加载图像的话题,由于以下原因,始终从 CDN 加载图像被认为是最佳实践。
    1. 减少 APK 大小
    2. 使用旧版应用程序的用户会立即获得更新的图标/图像。

我面临的一个具体问题是我在应用程序中为每个标签设置了一些背景图像。我想引入一个新标签。通过在后端进行一些更改,我能够轻松引入新标签。但是等等,那个新添加的标签的背景图像呢?我意识到这个新标签的背景图片不在应用程序资源中,因此,即使我发送添加了该图片的新更新,使用旧版本的人仍然可以在没有背景图片的情况下看到该标签.

在下面的评论中让我知道您使用 React Native 的观点和经验。请随时在 LinkedIn 上与我联系。