ReactNative(移动开发工具)

　　ReactNative可以帮助用户设计新的应用程序，可以设计手机上的软件，您可以通过软件设计安卓软件或者是iOS软件，软件提供多种开发组件，在设计应用程序的时候快速部署UI界面，可以添加文本，添加图像，添加其他响应内容，添加应用程序元素，为用户编辑UI界面提供帮助；软件是一个开源的框架，将其部署到开发平台就可以使用React和应用程序平台的本机功能构建Android和iOS应用程序，支持风格、高度和宽度、使用 Flexboxi进行布局、图片、颜色参考、相互作用等设计内容，借助核心组件就可以快速设置应用程序界面风格，如果你需要ReactNative就下载吧！

软件功能

　　使用React为Android和iOS创建本机应用

　　React Native将本机开发的最佳部分与React（用于构建用户界面的一流JavaScript库）结合在一起。

　　少用或多用：您可以立即在现有的Android和iOS项目中使用React Native，也可以从头开始创建一个全新的应用程序。

　　用JavaScript编写-使用本机代码呈现

　　React原语渲染到本机平台UI，这意味着您的应用程序使用与其他应用程序相同的本机平台API。

　　许多平台，一个React。创建特定于平台的组件版本，以便单个代码库可以跨平台共享代码。使用React Native，一个团队可以维护两个平台并共享一种通用技术-React。

　　面向所有人的原生开发

　　React Native可让您创建真正的本机应用程序，并且不会影响用户的体验。它提供了一套核心的像与平台无关本地组件的View，Text和Image 直接映射到该平台的原生UI添砖加瓦。

　　无缝跨平台

　　React组件封装了现有的本机代码，并通过React的声明性UI范例和JavaScript与本机API进行交互。这样可以为全新的开发人员团队进行本机应用程序开发，并且可以让现有的本机团队更快地工作。

　　快速刷新

　　保存后立即查看所做的更改。借助JavaScript的强大功能，React Native可让您以闪电般的速度进行迭代。无需等待本地构建完成。保存，查看，重复。

软件特色

　　风格

　　使用React Native，您可以使用JavaScript设置应用程序样式。所有核心组件均接受名为的道具style。样式名称和值通常与CSS在网络上的工作方式匹配，除了名称使用驼峰式大小写（例如backgroundColor而不是）background-color。

　　该style道具可以是普通的旧JavaScript对象。这就是我们通常用于示例代码的内容。您还可以传递样式数组-数组中的最后一个样式具有优先级，因此您可以使用它来继承样式。

　　随着组件的复杂性增加，通常可以更方便地StyleSheet.create在一个位置定义几种样式。这是一个例子：

　　高度和宽度

　　组件的高度和宽度决定其在屏幕上的大小。

　　固定尺寸

　　设置组件尺寸的一般方法是添加固定width和height样式。React Native中的所有尺寸都是无单位的，并且代表与密度无关的像素。

　　Flex的尺寸

　　flex以组件的样式使用，以使组件根据可用空间动态扩展和收缩。通常，您将使用flex: 1，告诉组件填充所有可用空间，并与同一个父组件在其他组件之间平均共享。flex给定值越大，组件与其同级组件所占的空间比例就越高。

　　平台特定代码

　　在构建跨平台应用程序时，您将希望重复使用尽可能多的代码。可能会出现使代码有所不同的场景，例如，您可能想为Android和iOS实现单独的可视组件。

　　React Native提供了两种组织代码并将其按平台分开的方式：

　　使用Platform模块。

　　使用特定于平台的文件扩展名。

　　某些组件可能具有仅在一个平台上起作用的属性。所有这些道具都带有注释，@platform并在网站上旁边有一个小徽章。

　　平台模块号

　　React Native提供了一个模块，用于检测运行应用程序的平台。您可以使用检测逻辑来实现特定于平台的代码。当仅组件的一小部分是特定于平台时，请使用此选项。

官方教程

　　绩效概述

　　使用React Native而不是基于WebView的工具的一个令人信服的原因是要达到每秒60帧的速度，并为您的应用程序提供本机的外观。在可能的情况下，我们希望React Native能够做正确的事情，并帮助您专注于您的应用而不是性能优化，但是在某些地方我们还不具备，而其他地方则是React Native（类似于编写本机）代码直接）可能无法确定为您优化的最佳方法，因此需要人工干预。默认情况下，我们会尽力提供流畅的UI性能，但有时这是不可能的。

　　本指南旨在教您一些基础知识，以帮助您解决性能问题，并讨论常见的问题来源及其建议的解决方案。

　　您需要了解的框架

　　您的祖父母这一代称电影为“电影”是有原因的：视频中的逼真的运动是通过以恒定的速度快速更改静态图像而产生的幻觉。我们将这些图像称为帧。每秒显示的帧数直接影响视频（或用户界面）的平滑度和最终的逼真度。iOS设备每秒显示60帧，这为您和UI系统提供了大约16.67毫秒的时间来完成生成静态图像（帧）所需的所有工作，用户将在该间隔内在屏幕上看到这些图像。如果您无法完成在分配的16.67ms内生成该帧所需的工作，则将“丢帧”，并且UI将显示为无响应。

　　现在，让这件事有些混乱，在您的应用程序中打开开发人员菜单，然后切换Show Perf Monitor。您会注意到有两种不同的帧速率。

　　JS帧率（JavaScript线程）＃

　　对于大多数React Native应用程序，您的业务逻辑将在JavaScript线程上运行。这是您的React应用程序所在的地方，进行API调用，处理触摸事件等。在事件循环的每次迭代结束时，在对本机支持的视图进行更新时，将对这些支持的视图进行批处理并发送到本机端框架截止日期（如果一切顺利）。如果JavaScript线程对某个帧无响应，则将其视为丢弃的帧。例如，如果您要打电话this.setState在复杂应用程序的根组件上，它导致重新渲染计算上昂贵的组件子树，可以想象这可能需要200毫秒并导致丢弃12个帧。在这段时间内，由JavaScript控制的所有动画都将冻结。如果花费的时间超过100毫秒，则用户会感觉到。

　　这通常在Navigator转换期间发生：当您推送新路线时，JavaScript线程需要呈现场景所需的所有组件，以便将适当的命令发送到本机端以创建后备视图。由于转换是由JavaScript线程控制的，因此在此处完成的工作通常会花费几帧并造成混乱。有时组件会在上做额外的工作componentDidMount，这可能会导致过渡中出现第二次停顿。

　　另一个示例是响应触摸：例如，如果跨JavaScript线程上的多个帧进行工作，则可能会注意到对的响应有所延迟TouchableOpacity。这是因为JavaScript线程正忙，无法处理从主线程发送来的原始触摸事件。结果，TouchableOpacity无法对触摸事件做出反应并命令本机视图调整其不透明度。

　　UI帧速率（主线程）＃

　　许多人注意到，性能NavigatorIOS比开箱更好Navigator。原因是过渡的动画完全在主线程上完成，因此它们不会被JavaScript线程上的帧丢失打断。

　　同样，ScrollView由于JavaScript线程位于ScrollView主线程中，因此您可以在a线程向上锁定时愉快地上下滚动。滚动事件被调度到JS线程，但是滚动发生并不需要它们的接收。

　　性能问题的常见来源＃

　　在开发模式下运行（dev=true）＃

　　在开发人员模式下运行时，JavaScript线程性能会受到很大影响。这是不可避免的：在运行时需要做更多的工作才能为您提供良好的警告和错误消息，例如验证propTypes和各种其他断言。始终确保在发布版本中测试性能。

　　使用console.log语句＃

　　当运行捆绑的应用程序时，这些语句可能会在JavaScript线程中造成很大的瓶颈。这包括来自调试库（例如redux-logger）的调用，因此请确保在捆绑之前将其删除。您也可以使用此babel插件删除所有console.*呼叫。您需要先使用进行安装npm i babel-plugin-transform-remove-console --save-dev，然后按如下所示编辑.babelrc项目目录下的文件：

　　这将自动删除console.*项目的发行（生产）版本中的所有调用。

　　ListView初始渲染太慢或滚动性能不好以供大型列表使用＃

　　请改用newFlatList或SectionListcomponent。除了简化API之外，新的列表组件还具有显着的性能增强，主要的优点是几乎可以恒定使用任意数量的行。

　　如果FlatList渲染速度很慢，请确保已getItemLayout通过跳过对已渲染项目的测量来实现优化渲染速度。

　　重新渲染几乎不变的视图时，JS FPS急剧下降＃

　　如果使用的是ListView，则必须提供一个rowHasChanged可以通过快速确定是否需要重新呈现行来减少很多工作的功能。如果您使用的是不可变数据结构，则只需进行参考相等性检查即可。

　　同样，您可以实现shouldComponentUpdate并指出要重新渲染组件的确切条件。如果编写纯组件（渲染函数的返回值完全取决于属性和状态），则可以利用PureComponent为您完成此操作。同样，不可变的数据结构对于保持这种速度非常有用-如果您必须对大量对象进行深入比较，则可能是重新渲染整个组件会更快，并且当然需要更少的代码。

　　由于同时在JavaScript线程上进行了大量工作，因此删除了JS线程FPS ＃

　　“缓慢的导航器过渡”是这种情况的最常见表现，但有时还会发生这种情况。使用InteractionManager可能是一种很好的方法，但是如果用户体验成本太高而无法在动画期间延迟工作，那么您可能需要考虑LayoutAnimation。

　　除非您设置useNativeDriver: true，否则Animated API当前会按需计算JavaScript线程上的每个关键帧，而LayoutAnimation利用Core Animation且不受JS线程和主线程帧放置的影响。

　　我使用过的一种情况是在模态中进行动画处理（从顶部向下滑动并在半透明的叠加中淡入淡出），同时初始化并可能接收多个网络请求的响应，渲染模态的内容，并在模态中更新视图从打开。有关如何使用LayoutAnimation的更多信息，请参见动画指南。

　　注意事项：

　　LayoutAnimation仅适用于即弃式动画（“静态”动画）-如果必须可中断，则需要使用Animated。

　　在屏幕上移动视图（滚动，平移，旋转）会掉落UI线程FPS ＃

　　当您在图像上方放置具有透明背景的文本时，或者在需要使用alpha合成以在每帧上重新绘制视图的任何其他情况下，尤其如此。您会发现启用shouldRasterizeIOS或renderToHardwareTextureAndroid可以大大帮助您。

　　请注意不要过度使用此功能，否则您的内存使用量可能会很快增加。使用这些道具时，请分析您的性能和内存使用情况。如果您不打算再移动视图，请关闭此属性。

　　动画化图像大小会掉落UI线程FPS ＃

　　在iOS上，每次调整Image组件的宽度或高度时，都会从原始图像重新裁剪和缩放该图像组件。这可能非常昂贵，尤其是对于大图像。而是使用transform: [{scale}]style属性设置大小的动画。例如，当您点击图像并将其放大到全屏时，便可以执行此操作。

　　我的TouchableX视图反应不太灵敏＃

　　有时，如果我们在调整响应触摸的组件的不透明度或高光的同一帧中执行操作，则直到onPress函数返回后我们才能看到这种效果。如果onPress这样做setState会导致大量工作而丢了几帧，则可能会发生这种情况。一种解决方案是将onPress处理程序内部的任何操作包装在中requestAnimationFrame：

　　慢导航过渡＃

　　如上所述，Navigator动画由JavaScript线程控制。想象一下“从右推”场景的过渡：每帧，新场景从右向左移动，从屏幕外开始（假设x偏移为320），最终在场景位于x偏移为x时稳定下来。 0。在此过渡期间的每一帧，JavaScript线程都需要向主线程发送一个新的x偏移量。如果JavaScript线程被锁定，则无法执行此操作，因此在该帧上不会发生任何更新，并且动画会出现卡顿现象。

　　一种解决方案是允许将基于JavaScript的动画卸载到主线程。如果要使用上述方法执行与上例相同的操作，则可以在开始过渡时计算新场景的所有x偏移的列表，然后将它们发送到主线程以优化的方式执行。既然JavaScript线程已经摆脱了这种责任，那么在渲染场景时丢掉几帧就没什么大不了了-您甚至可能不会注意到，因为您会因漂亮的过渡而分心。

　　解决这个问题是新的React Navigation库背后的主要目标之一。React Navigation中的视图使用本机组件和Animated库来交付在本机线程上运行的60 FPS动画。

　　搭建开发环境

　　该页面将帮助您安装和构建第一个React Native应用程序。

　　如果您不熟悉移动开发，最简单的入门方法是使用Expo CLI。Expo是围绕React Native构建的一组工具，尽管它具有许多功能，但现在对我们而言最重要的功能是可以让您在几分钟内编写React Native应用。您只需要使用最新版本的Node.js以及电话或仿真器。如果您想在安装任何工具之前直接在Web浏览器中试用React Native，可以尝试Snack。

　　如果您已经熟悉移动开发，则可能要使用React Native CLI。它需要Xcode或Android Studio才能开始。如果您已经安装了这些工具之一，则应该可以在几分钟内启动并运行。如果未安装它们，则应该花费大约一个小时来安装和配置它们。

　　Expo CLI快速入门

　　React Native CLI快速入门

　　假设您已安装Node 12 LTS或更高版本，则可以使用npm安装Expo CLI命令行实用程序：

　　然后运行以下命令来创建一个名为“ AwesomeProject”的新React Native项目：

　　这将为您启动开发服务器。

　　运行您的React Native应用程序

　　在iOS或Android手机上安装Expo客户端应用程序，然后连接到与计算机相同的无线网络。在Android上，使用Expo应用程序从终端扫描QR码以打开您的项目。在iOS上，使用Camera应用程序的内置QR码扫描仪。

　　修改您的应用

　　现在您已经成功运行了应用程序，让我们对其进行修改。App.js在您选择的文本编辑器中打开并编辑一些行。保存更改后，应用程序应自动重新加载。

　　而已！

　　恭喜你！您已经成功运行并修改了您的第一个React Native应用程序。

　　在模拟器或虚拟设备上运行您的应用

　　Expo CLI允许您在物理设备上运行React Native应用程序，而无需设置开发环境。如果要在iOS模拟器或Android虚拟设备上运行应用程序，请参阅“ React Native CLI快速入门”中的说明，以了解如何安装Xcode或设置Android开发环境。

　　设置完这些之后，您可以通过运行在Android虚拟设备上启动应用程序npm run android，或者通过运行在iOS模拟器上启动应用程序npm run ios（仅适用于macOS）。

　　注意事项

　　因为在使用Expo来创建项目时您没有构建任何本机代码，所以除了React Native API和Expo客户端应用程序中可用的组件之外，无法包括自定义本机模块。

　　如果您知道最终需要包括自己的本机代码，那么Expo仍然是入门的好方法。在这种情况下，您最终需要“弹出”以创建自己的本机版本。如果确实弹出，则需要“ React Native CLI快速入门”说明来继续进行项目。

　　Expo CLI将您的项目配置为使用Expo客户端应用程序支持的最新React Native版本。在React Native版本稳定发布后约一周，Expo客户端应用程序通常会获得对给定React Native版本的支持

　　代码集成＃

　　现在，我们将实际修改原生Android应用程序以集成React Native。

　　React Native组件＃

　　我们将编写的第一部分代码是新的“高分”屏幕的实际React Native代码，该屏幕将集成到我们的应用程序中。

　　1.创建一个index.js文件＃

　　首先，index.js在您的React Native项目的根目录中创建一个空文件。

　　index.js是React Native应用程序的起点，并且始终是必需的。它可以是require与您的React Native组件或应用程序一起的其他文件的小文件，也可以包含所需的所有代码。就我们而言，我们将所有内容都放入index.js。

　　2.添加你的阵营原生代码＃

　　在中index.js，创建您的组件。在这里的示例中，我们将在样式中添加一个组件：

　　3.配置开发错误覆盖的权限＃

　　如果您的应用程序针对AndroidAPI level 23或更高版本，请确保您已android.permission.SYSTEM_ALERT_WINDOW为开发版本启用权限。您可以使用进行检查Settings.canDrawOverlays(this);。这在开发人员构建中是必需的，因为必须在所有其他窗口上方显示React Native开发错误。由于API级别23（Android M）中引入了新的权限系统，因此用户需要批准它。这可以通过将以下代码添加到Activity的inonCreate()方法中来实现。

　　最后，onActivityResult()必须重写该方法（如下面的代码所示），以处理一致的UX的许可“接受”或“拒绝”情况。另外，为了集成使用的本机模块startActivityForResult，我们需要将结果传递给实例的onActivityResult方法ReactInstanceManager

　　魔术：ReactRootView＃

　　让我们添加一些本机代码以启动React Native运行时并告诉它呈现我们的JS组件。为此，我们将创建一个Activity创建一个ReactRootView，在其中启动一个React应用程序并将其设置为主要内容视图。

　　如果您定位的Android版本是<5，请使用包中的AppCompatActivity类com.android.support:appcompat代替Activity。

　　如果您使用的是React Native入门套件，则用index.js文件中的字符串替换“ HelloWorld”字符串（这是该AppRegistry.registerComponent()方法的第一个参数）。

　　执行“使用Gradle同步项目文件”操作。

　　如果您使用的是Android Studio，请使用Alt + Enter，在MyReactActivity类中添加所有缺少的导入。请小心使用您的包装BuildConfig而不是包装中的facebook包装。

　　我们需要将主题设置为MyReactActivity，Theme.AppCompat.Light.NoActionBar因为某些React Native UI组件依赖于此主题。

　　阿ReactInstanceManager可以由多个活动和/或片段共享。你会想使自己ReactFragment或ReactActivity并有单座，其保持ReactInstanceManager。当您需要ReactInstanceManager（例如，将ReactInstanceManager这些活动或片段的生命周期挂钩）时，请使用单例提供的那个。

　　接下来，我们需要将一些活动生命周期回调传递给ReactInstanceManager和ReactRootView：

　　我们还需要将按钮事件传递回React Native：

　　这使JavaScript可以控制用户按下硬件后退按钮时发生的情况（例如，实现导航）。当JavaScript无法处理返回按钮的按下操作时，您的invokeDefaultOnBackPressed方法将被调用。默认情况下，此操作完成Activity。

　　最后，我们需要连接开发菜单。默认情况下，通过（愤怒）摇动设备来激活该功能，但这在仿真器中不是很有用。因此，当您按下硬件菜单按钮时（Ctrl + M如果您使用的是Android Studio仿真器，则可以使用）：

　　现在，您的活动已准备就绪，可以运行一些JavaScript代码。