麦溪·在路上

[TOC] 概述文章参考：https://segmentfault.com/a/1190000016149881文章参考：https://shenbao.github.io/ishehui/html/RN%20%E5%9F%BA%E7%A1%80/React%20Native%20%E5%B8%83%E5%B1%80%E4%B9%8BFlexBox.html 我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。 React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。 Flex Direction在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(r ...

[TOC] 概述文章参考：http://liuwangshu.cn/rn/primer/5-fetch.html 很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个 REST API 发起 POST 请求以提交用户数据，又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。新手可以对照这个简短的视频教程加深理解。 使用 FetchReact Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API，那么 Fetch 用起来将会相当容易上手。这篇文档只会列出 Fetch 的基本用法，并不会讲述太多细节，你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多信息。 发起请求要从任意地址获取内容的话，只需简单地将网址作为参数传递给 fetch 方法即可（fetch 这个词本身也就是获取的意思）： 1fetch('https://mywebsite.com/mydata.json'); Fetch 还有可选 ...

[TOC] 概述文章参考：https://www.jianshu.com/p/3203f413a887 React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。 FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。 FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。 FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。 下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。 下面，我们来看一下测试的Demo。 12345678910111213141516171819202122232425262728 ...

[TOC] 概述配置动画动画拥有非常灵活的配置项。自定义的或预定义的 easing 函数、延迟、持续时间、衰减系数、弹性常数等都可以在对应类型的动画中进行配置。 Animated提供了多种动画类型，其中最常用的要属Animated.timing(). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects. 它支持使用各种预定义的缓动函数之一随时间动画值，也可以使用自己的缓动函数。在动画中，缓动函数通常用于表示对象的逐渐加速和减速。 By default, timing will use a easeInOut curve that conveys gradual acceleration to ful ...

[TOC] 概述如果你耐心的读完并理解了本网站上的所有文档，那么你应该已经可以编写一个像样的 React Native 应用了。但是 React Native 并不全是某一家公司的作品——它汇聚了成千上万开源社区开发者的智慧结晶。如果你想深入研究 React Native，那么建议不要错过下面这些参考资源。 常用的第三方库如果你正在使用 React Native，那你应该已经对React有一定的了解了。React 是基础中的基础所以我其实不太好意思提这个——但是，如果不幸你属于“但是”，那么请一定先了解下 React，它也非常适合编写现代化的网站。 开发实践中的一个常见问题就是如何管理应用的“状态（state）”。这方面目前最流行的库非Redux莫属了。不要被 Redux 中经常出现的类似”reducer”这样的概念术语给吓住了——它其实是个很简单的库，网上也有很多优秀的视频教程（英文） 。。 如果你在寻找具有某个特定功能的第三方库，那么可以看看别人精心整理的资源列表。这里还有个类似的中文资源列表。 开发工具Nuclide是 Facebook 内部所使用的 React Native 开 ...

[TOC] 概述文章参考：https://github.com/dbarner1/react-native-stickers

[TOC] 概述文章转自：

[TOC] 概述文章参考：https://juejin.im/entry/590fe17b1b69e6006854987b 文章参考：https://blog.csdn.net/bunny1024/article/details/70145867

[TOC] 概述流畅、有意义的动画对于移动应用用户体验来说是非常重要的。现实生活中的物体在开始移动和停下来的时候都具有一定的惯性，我们在界面中也可以使用动画来实现契合物理规律的交互。 React Native 提供了两个互补的动画系统：用于创建精细的交互控制的动画Animated和用于全局的布局动画LayoutAnimation。 AnimatedAnimated使得开发者可以简洁地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入与输出，在其中建立一个可配置的变化函数，然后使用start/stop方法来控制动画按顺序执行。 Animated仅封装了6个可以动画化的组件：View、Text、Image、ScrollView、FlatList和SectionList，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。下面是一个在加载时带有淡入动画效果的视图： 123456789101112131415161718192021222324252627282930313233343 ...

[TOC]