React Native 提供了一些内置的组件。你可以在网站的左侧看到组件的完整列表。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类：需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。
- 基础组件
- 交互控件
- 列表视图
- iOS 独有组件
- Android 独有组件
- 其他
在编写跨平台的应用时，我们肯定希望尽可能多地复用代码。但是总有些时候我们会碰到针对不同平台编写不同代码的需求。
React Native 提供了两种方法来区分平台：
- 使用
Platform模块. - 使用特定平台扩展名.
另外有些内置组件的某些属性可能只在特定平台上有效。请在阅读文档时留意。
Platform 模块(能够返回当前系统是android还是ios,同时还能返回对应的version)React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场。
特定平台扩展名(import BigButton from './BigButton'; 自动去掉扩展名BigButton.iso.js,BigBUtton.android.js)
当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台扩展名。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。
使用导航器跳转页面
本文档总结对比了 React Native 中现有的几个导航组件。如果你刚开始接触，那么直接选择React Navigation就好。 React Navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。
如果你想同时在iOS和Android上达到看起来像原生，或者你想把RN整合到一个已经有原生导航管理的APP里, 下面这个库提供了在两个平台都适用的原生导航: react-native-navigation.
图片(这个跟特定平台扩展名一样,可以根据平台自动选择不同的图片) 静态图片资源
图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager 就会去这个组件所在的文件夹下查找my-icon.png。并且，如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构
注意：为了使新的图片资源机制正常工作，require 中的图片名字必须是一个静态字符串（不能使用变量！因为 require 是在编译时期执行，而非运行时期执行！）。
静态的非图片资源
上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持，包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等（完整列表请看 packager defaults)。
使用混合 App 的图片资源(这个估计不会用,不要混合开发)
如果你在编写一个混合 App（一部分 UI 使用 React Native，而另一部分使用平台原生代码），也可以使用已经打包到 App 中的图片资源
网络图片
很多要在 App 中显示的图片并不能在编译的时候获得，又或者有时候需要动态载入来减少打包后的二进制文件的大小。这些时候，与静态资源不同的是，你需要手动指定图片的尺寸。同时我们强烈建议你使用 https 以满足 iOS App Transport Security 的要求。
Uri 数据图片(建议仅对非常小的图片使用 base64 数据，比如一些小图标。)
有时候你可能拿到的是图片的 base64 数据，此时可以使用'data:'格式来显示图片。请注意，你需要手动指定图片的尺寸。
缓存控制（仅 iOS）
在某些情况下你可能仅仅想展示一张已经在本地缓存的图片，例如一个低分辨率的占位符，直到高分辨率的图片可用。又或者你无所谓图片是否过时，而且也不在乎显示过时的图片，节省带宽相对更重要。缓存资源属性提供给了你控制网络层与缓存交互的方式。
本地文件系统中的图片
参考相册（CameraRoll)这个例子来看如何使用在Images.xcassets以外的本地资源。
最合适的相册图片(只有加载本地图片的时候react才会自动为你设置高和宽)
iOS 会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑，从这些副本中挑出最合适的尺寸显得尤为重要。对于一处 200x200 大小的缩略图，显然不应该选择最高质量的 3264x2448 大小的图片。如果恰好有匹配的尺寸，那么 React Native 会自动为你选好。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出 50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。
资源属性是一个对象（object,这样便于将来组件属性的扩展)
在 React Native 中，另一个值得一提的变动是我们把src属性改为了source属性，而且并不接受字符串，正确的值是一个带有uri属性的对象。
背景图片与嵌套写法
开发者们常面对的一种需求就是类似 web 中的背景图（background-image）。要实现这一用例，只需使用组件（其 props 与完全相同），然后把需要背景图的子组件嵌入其中即可。
也可能你并不需要使用，因为它的实现其实非常简单，实质就是对图片使用了绝对定位。你可以阅读其文档然后思考你是否有更好更简单的布局方案。
在主线程外解码图片(react的惊喜功能)
图片解码有可能会需要超过一帧的时间。在 web 上这是页面掉帧的一大因素，因为解码是在主线程中完成的。然而在 React Native 中，图片解码则是在另一线程中完成的。在实际开发中，一般对图片还没下载完成时的场景都做了处理（添加 loading 等），而图片解码时显示的占位符只占用几帧时间，并不需要你改动代码去额外处理。
动画(这个没看完!!!! 就是一些动画效果的组件使用)
React Native 提供了两个互补的动画系统：用于创建精细的交互控制的动画Animated和用于全局的布局动画LayoutAnimation。
Animated(官方的用例感觉有点难懂,因为用了一些还不是很熟悉的组件)
Animated使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用简单的start/stop方法来控制动画按顺序执行。 Animated仅封装了6个可以动画化的组件：View、Text、Image、ScrollView、FlatList和SectionList，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图：
无障碍功能(主要是语音上的提示,另外Android和IOS要的某些功能要单独启用-----内容还是比较多)
可访问性、无障碍性、辅助功能等等，其中文意思都不太能准确表达其功能的本质——即为残障人士提供便利。本文主要采用“无障碍功能”和“辅助技术/服务”的说法。如果你或你的公司暂时没有资源和精力去服务这些用户，那么你可以跳过本文。
iOS 和 Android 都提供了便于残障人士无障碍使用 App 的 API。此外，两个平台都提供了整套的辅助技术，比如都有针对视力受损人士的读屏软件（iOS 的 VoiceOver 和 Android 的 TalkBack）。同样地，在 React Native 中我们也封装了对应的 API，使开发者能够在 App 中集成无障碍功能。注意：iOS 与 Android 在具体方法上会有所区别，因此 React Native 的实现也会因平台而异。
使 App 能够无障碍使用 无障碍功能属性这里的内容还是比较多.用的时候官网上看吧
改进用户体验(要考虑的几个方向,来提升体验)
配置文本输入
由于触屏手机的小屏幕和软键盘，使得在手机中输入文本成为一件具有挑战的事情。 但是你可以基于你需要的数据配置文本输入让这个过程变得简单。
- 自动对焦( focus )第一个文本域
- 使用placeholder 作为预想的输入格式
- 启用 或者 禁用 自动大写、自动校正
- 选择键盘类型 【例如 email, 数字(numeric)】
- 确保回车按钮对焦到下一个域或者提交表单
- 查看
TextInput文档 了解更多配置信息
键盘隐藏时的布局管理
软键盘几乎占用将近一半的手机屏幕。 如果你有会被软键盘覆盖的交互式组件，请使用[KeyboardAvoidingView 组件]以确保他们可以在打开键盘时可以被访问。
放大可触控区域
在手机上精准的点击一个按钮是很困难的一件事。 确保所有交互式元素大于等于44x44。 常见的撑大尺寸的做法有：使用 padding, minWidth 和 minHeight 样式。 或者， 可以使用 hitSlop 属性 无需影响布局来增加可交互区域。 这是一个演示：
使用 Android 水波纹效果
安卓 API 21+ 使用 material design Ripple 在用户点击屏幕上可交互区域的时候为用户提供反馈。 React Native 利用TouchableNativeFeedback 组件 实现了这个功能。 使用这个触摸效果取代 opacity 或者 highlight 通常会让您的应用程序更加切合平台。 尽管如此， 还是需要注意这个组件在 IOS 平台上 或者在 Android API 小于21下无法工作的情况，所以你需要退而求其次，在IOS上使用其他的可触控组件，可以使用诸如 react-native-platform-touchable 的组件解决平台差异。
屏幕的旋转锁定
一般情况下 多屏幕(指的是横向和纵向) 会正常显示，除非你使用Dimensions API 并且 不处理 方向改变事件 (orientation changes)。 如果你不想做多屏幕方向支持，你可以锁定屏幕方向为 横向 或者纵向。
On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes)。
对于安卓， 打开 AndroidManifest.xml 文件 并且在 Activity 元素中添加 'android:screenOrientation="portrait"' 以锁定屏幕为纵向， 或者使用'android:screenOrientation="landscape"'锁定屏幕为横向。
