zhuhf Blog

路漫漫其修远兮

[React Native]导航器Navigator

前言 官方提供了两种导航器:Navigator和NavigatorIOS,后者只能在iOS平台使用,而前者是可以兼容Android和iOS平台的,详细介绍请参考官方介绍。 基本使用方式 initialRoute:初始化路由,指定第一个页面 configureScene:配置页面切换场景 renderScene:渲染场景,返回需要显示的页面 常见的一个写法: // ......

[React Native]动画-Animated

在上一篇文章中,我们学习了React Native实现动画的几种方式,其中重点介绍了LayoutAnimation。文章的末尾也提到,如果你需要更强大的动画功能,就需要使用高级API—Animated。 如果你还不了解LayoutAnimation,建议先阅读下上一篇文章[React Native]动画-LayoutAnimation,其中的一些概念能让你更好的理解本篇文章的内容。 本篇...

[React Native]动画-LayoutAnimation

实现动画的几种方式: requestAnimationFrame setNativeProps LayoutAnimation Animated 本篇文章我们会介绍前三种方式,以及它们的区别。下一篇文章会介绍高级API—Animated的用法。 requestAnimationFrame 如果不使用任何动画API,我会想到一种简单粗暴的方式来实现动画效果—通过修改st...

[React Native]react-native-scrollable-tab-view(进阶篇)

在上一篇文章当中,我们学习了react-native-scrollable-tab-view的基本使用方式,包括基本Props的使用介绍等。我们知道官方为我们提供了两种基本的Tab控制器样式,DefaultTabBar和ScrollableTabBar。很多情况下,官方的样式并不能满足我们的需求(备注:官方的样式是文字+下划线的风格),那么此时就需要我们自己来实现特定的样式。 今天我们是...

[React Native]react-native-scrollable-tab-view(入门篇)

官方为我们提供的Tab控制器有两种: TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab) 如果我们需要一个更通用的Tab控制器,那么就要借助开源的力量,本篇文章教你如何使用 react-native-scrollable-tab-view,这是官方Demo的效果 一、准备工作 ...

[React Native]弹性布局Flexbox

什么是Flexbox? 简单来说Flexbox是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为Flexbox是CSS领域类似Android中 LinearLayout的一种布局,但是要比 LinearLayout要强大的多。 ReactNative中的Flexbox 总所周知,移动端在使用和...