React Native如何快速如何快速入门?首先阅读!

2021年3月18日16:24:31 发表评论 884 次浏览
React Native如何快速入门?首先阅读!1

几个月前, 我开始使用React Native。我发现它既充满挑战又充满满足感。 React Native入门并不像许多其他框架那么顺畅, 但是一旦你克服了这些麻烦, 很快就会适应(特别是如果你已经具备Java技能)。这是我在学习过程中学到的一些东西, 如果你也开始进行React Native之旅, 这将对你有所帮助。

使用&&运算符进行条件渲染

为了有条件地渲染组件, 在React中使用&&运算符是很常见的。例如, 假设我们要显示用户详细信息(使用

用户详细信息

组件)当用户登录时。我们可以按照以下步骤进行操作

React Native如何快速入门?首先阅读!2

这是如何工作的, 如果&&运算符前面的值是真实的(新的JS语言)?这个out), 则呈现&&运算符右侧的值。

但是, 在使用&&运算符时, 你需要格外小心。假设在用户详细信息组件, 我们只想显示用户的电子邮件地址。因此, 我们可以再次使用与以下相同的&&运算符

React Native如何快速入门?首先阅读!3

但是, 请等待, 如果emailAddress为空字符串, 则你的应用程序将崩溃。是的, 它确实会崩溃。这是因为在本机反应中, 每个字符串(甚至是空字符串)都需要放在标记中才能呈现到屏幕。因此, 当emailAddress为空字符串时, 其计算结果为假值, 因此不会显示&&运算符右侧的标记, 而是该应用尝试直接呈现值为""的emailAddress字符串, 然后崩溃。

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

React Native如何快速入门?首先阅读!4

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

好吧, 那我们该如何解决这个问题呢?好, 我们有两种简单的方法

1.确保&&运算符左侧的值是布尔值。

2.使用三元运算符

React Native如何快速入门?首先阅读!5

Android和iOS上的不同行为

React Native如何快速入门?首先阅读!6

始终牢记, 尽管大多数可在android上运行的代码都可以直接在iOS上运行, 反之亦然, 但是有些行为会有所不同。例如, 阴影和高程在android和iOS上的行为有所不同。

此外, 本机组件在Android和iOS上的行为可能有所不同。例如, "选择器"组件在Android和iOS上的行为有所不同。

React Native如何快速入门?首先阅读!7
React Native如何快速入门?首先阅读!8

始终尝试将组件分解为较小的组件

有时候, 我们觉得不需要为屏幕的一小部分制作单独的组件。但是, 在大多数情况下, 将其移至单独的组件是个好主意。从长远来看, 它可以在许多方面为你提供帮助

1.它易于在以后的阶段重构代码(如果需要)。

2.移动/修改屏幕的一部分更加容易, 因为它已经是独立的

3.你的代码不会不必要地紧密耦合不同的意图

请参阅官方文档, 网址为这个举个例子

尝试从CDN加载图像

React Native如何快速入门?首先阅读!9

这是在移动应用程序上工作时应遵循的一般指导原则。 Web应用程序开发和移动应用程序开发的主要区别在于更新/修复应用程序的灵活性。对于Web Apps, 你可以随时随地自由发送更新, 人们几乎可以立即获得更新。但是, 对于Mobile Apps, 一旦你从头开始更新应用程序, 则取决于用户最终何时更新其应用程序并获取最新版本。另外, 如果用户经常需要更新你的应用程序, 那么频繁发送更新也可能会激怒他们。

现在回到从CDN加载图像的主题, 由于以下原因, 始终从CDN加载图像被视为最佳实践。

1.缩小的APK大小

2.使用旧版应用的用户会立即获得更新的图标/图像。

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

在下面的评论中, 让我知道你对使用React Native的看法和经验。随时与我联系领英.


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: