如果大家喜欢我的文章的话希望大家点赞、收藏、评论来支持我，谢谢大家，这对我真的很重要！

在开发的时候，如果只是想写一些简单的页面，基本按照官方的.dev文档来写就可以了，但是API有几百个，如果没有一定的开发经验，面对一些新的需求时，就会无法抓住重点。

本文总结了我个人开发中遇到的问题以及一些不常用的API，如果有人能看到这篇文章，并解决实际问题就好了。

1. 内置组件

这部分主要是对官网Core内容的补充，主要讲了一些开发经历中不愉快的地方，帮助后人避免踩坑。

1.查看

View组件作为最基础的组件，支撑起了RN页面的半壁江山，在使用过程中，它有几个不太常用，但个人认为还挺好用的属性。

2.文本

Text 组件是一个非常常用的属性，有几个小点开发者需要注意：

3.

输入框组件也是一个很常用的属性，我个人在使用过程中，有几个不愉快的地方：

4.

个人认为该组件的表现非常出色，但是刚入门的同学可能还对一些细节不太适应：

不支持点 9-图表 5。

之前RN官方提供的组件有一个比较明显的问题，就是无法覆盖状态栏，比如我们做一个黑色半透明背景的弹窗，但是状态栏是白色的，从观感上来说会很割裂。

幸好0.62版本有个属性可以设置为true来遮盖状态栏，如果是0.62以下版本就需要改一些配置了，可以参考这个答案：如何隐藏when-？

6.

该组件是RN提供的一个滑动容器组件，有几个不太常用但是非常好用的API我在这里讲解一下。

第一个是吸顶功能，涉及到t和这两个API，可以实现滚动吸顶的效果，非常好用。

第二是属性，iOS 滚动列表有时候会出现莫名其妙的空白区域，这个是 iOS 层实现的，RN 具体的触发时机我没有做过详细测试，不过基本上关闭这个属性就可以避免。

7.

主要注意3点：

2. 内置 API

这部分主要对官网API内容进行补充，主要讲一些开发经历中不愉快的地方，帮助后人避免踩坑。

1.

在实际开发中这个API主要用于监听APP前后端的切换，这个API在iOS上语义是一致的，但是在web上存在问题，因为客户端上的实现其实是基于的。

例如，提供的状态实际上是基于的，但根据文档，执行 () 时有几种情况：

综上所述，在监控APP状态的时候，要充分考虑这些“异常”行为是否会引起程序BUG。

2.

APP平台的权限管理是一个很繁琐的事情，RN官方只提供了，但是没有提供跨平台的权限管理API，使用起来很不方便，这里我推荐使用这个库，管理权限比较方便。

3.

RN 官网上没有暴露相关 API，但是 RN 已经有了这个“发布-订阅”事件管理 API，也非常好用，可以按照下面的示例使用。

import { DeviceEventEmitter } from 'react-native'; // 触发 DeviceEventEmitter.emit('EVENT'); // 监听 const listener = DeviceEventEmitter.addListener( 'EVENT', () => {}); // 移除 listener.remove()

4.

说实话，掌握RN的动画API的成本比较高，单是官方API就涉及到了诸如、、、、等概念，且文档比较零散，对于初学者来说很难在头脑中构建出完整的思维导图。

如果想要打造性能更高的动画，就必须学习 等第三方库的API，学习成本会直线上升。

这里推荐这本在线书籍，基本是循序渐进的教程，看完之后会对RN的动画API有一个大概的了解。

3. 第三方

一些非核心组件逐渐交给社区维护，如，--等，也有一些非官方但非常有用的组件，如--svg，--等。

除了这些和相关的第三方库之外，还可以使用 JS 社区中独立于主机的 JS 库，比如，和其他纯逻辑库。

由于第三方库太多，这里就不一一列举了。

4. 特效

的样式属性只提供了基本的布局属性，比如 等，但很多CSS3特效属性基本都要引入第三方库，我整理了几个常用的UI特效用到的属性及插件，方便开发者使用。

1.圆角

这个可以直接使用View的属性来实现，RN也支持设置View四个角的单独圆弧。

2. 模糊效果

模糊效果需要用到RN官方社区库@--/blur，这个RN的模糊库比CSS的blur()属性强大很多，CSS只支持高斯模糊，而这个库至少支持三种模糊效果，不过具体效果还是需要跟UED商量。

3.阴影效果

阴影可以由 RN 提供，但它们是特定于平台的：

4.渐变效果

渐变需要第三方库：---。顾名思义，此存储库仅提供“线性渐变”解决方案。以我个人的经验，大多数情况下线性渐变就足够了。如果您想使用“径向渐变”，可以使用--svg 组件。

5.可视化

除了最基本的

标签、SVG等自由度较高的绘图API，支持绝大多数可视化场景，比如各种自定义图片、图表等。下面简单介绍一下RN中一些媲美Web的第三方库。

1. SVG

RN 的 SVG 支持是基于 --svg 仓库实现的，从我个人的使用体验来看，它和 Web 的 SVG 功能基本一致，除了可以绘制一些自定义的 SVG 之外，其主要作用是作为底层库，支持上层图表的使用。

2. 类

RN 中没有这个概念，市面上也没有很好的替代方案。有开发者想出了 --skia，也有一些 demo。但它目前还是一个实验项目，在生产环境中使用风险还是太高。不过从我个人的经验来看，很多绘制功能都可以基于 SVG 实现，没必要使用它。

基于skia，可以集成起来，玩套娃游戏:)

3. 支持

在移动端，浏览器平台封装了ES，RN本身已经很贴近平台了，没必要走很远去支持，直接支持ES就行。

目前RN的支持是基于gl-的，底层适配层是基于expo-gl的，网上有gl-的demo教程，有需要的读者可以借鉴一下。

由于我没做过RN 3D相关的需求，所以无法对该库给出准确的评价，需要读者自行判断。

4.图表功能

图表是一个非常现实的需求，在一些B端场景中经常会有报表需求。由于RN只对SVG的支持比较完善，所以RN的图表基本都是基于SVG绘制的。

Web 上基于 SVG 的图表库很多，但能被 RN 使用的可能就那么几个，主要原因是 RN 和 Web 的宿主环境不一样，有些图表库可能用到了 Web 特有的 API（举个例子），RN 当然不能用这样的库。

可以迁移的库一般满足两个条件：

这里有一个基于D3.js实现股票箱线图的视频教程，感兴趣的读者可以去看一下。

5.海报功能

海报分享是现在很常见的前端功能，网页基本都是以生成分享海报为主，RN虽然没有很好的API，但是有一个很好的库——view-shot，可以将用RN编写的View生成一张图片，有了这个库就可以在APP本地生成图片，实现海报功能。